@fredwsw/frontend-rules 1.0.0

package/template/skills/code-simplifier/SKILL.md

@@ -0,0 +1,109 @@
+---
+name: code-simplifier
+description: Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Focuses on recently modified code unless instructed otherwise, and applies project-specific standards such as those defined in CLAUDE.md.
+---
+
+# Code Simplifier
+
+This skill simplifies and refines code for clarity, consistency, and long-term maintainability while preserving exact behavior.
+
+The agent acts as an expert code simplification specialist who applies project-specific best practices without changing what the code does.
+
+## When to Use
+
+- Use after writing or modifying code to refine its structure and readability.
+- Use when recently changed code feels complex, inconsistent, or hard to maintain.
+- Use when aligning code with project standards from `CLAUDE.md` or other local conventions.
+- By default, focus on **recently modified code** in the current session unless explicitly asked to broaden the scope.
+
+## Core Principles
+
+- **Preserve functionality**
+  - Never change public behavior, side effects, or outputs.
+  - Keep all existing features, edge cases, and error paths intact.
+  - Treat tests and existing usage as the ground truth for expected behavior.
+
+- **Apply project standards**
+  - Follow coding conventions defined in `CLAUDE.md` and project docs.
+  - Use ES modules with consistent import style and ordering when applicable.
+  - Prefer `function` declarations over arrow functions for top-level functions where that matches project style.
+  - Add explicit return type annotations for top-level functions in typed codebases when that is the local norm.
+  - Follow established React or framework-specific component patterns (props types, state management, hooks usage, etc.).
+  - Use the project's preferred error handling patterns; avoid unnecessary `try/catch` if there is a simpler, safer pattern.
+  - Maintain consistent naming conventions that match the surrounding code.
+  - Enforce clear, meaningful naming:
+    - Use descriptive names that reflect the domain intent for variables, functions, and components.
+    - Avoid meaningless or opaque identifiers (such as arbitrary letters or numbers) except for very short‑lived loop indices.
+    - Avoid mixing languages within the same identifier (for example, part Chinese and part English); follow the dominant language and style of the current file or project.
+    - Keep naming style consistent (for example, `camelCase`, `PascalCase`, `SNAKE_CASE`) with nearby code and project guidelines.
+
+- **Enhance clarity**
+  - Reduce unnecessary nesting and deeply indented branches where possible.
+  - Remove redundant code, dead branches, and unused variables when safe.
+  - Replace confusing flows with clearer control structures while keeping behavior the same.
+  - Improve naming for variables, functions, and components when it increases readability and matches local style.
+  - Remove comments that merely restate what obvious code does; keep or add comments that clarify non-obvious intent or constraints.
+  - **Avoid nested ternary operators**; prefer `if/else` chains or `switch` statements for multi-branch conditions.
+  - Prefer explicit, readable code over overly compact one-liners.
+
+- **Maintain balance**
+  - Do not over-simplify in ways that hide important abstractions or domain concepts.
+  - Avoid "clever" tricks that make code shorter but harder to understand or debug.
+  - Keep helpful abstractions and separation of concerns intact.
+  - Do not merge unrelated responsibilities into a single function or component just to reduce line count.
+  - Prefer code that future contributors can easily extend and debug.
+
+## Scope of Changes
+
+- Default scope:
+  - Focus on **recently modified or newly written code** in the current session.
+  - Avoid refactoring distant or untouched areas unless explicitly requested.
+- Expanded scope (only when asked):
+  - May scan related files or modules to align interfaces and naming.
+  - May simplify shared utilities if they directly affect the modified code path.
+
+## Workflow
+
+When using this skill, follow this refinement process:
+
+1. **Identify target code**
+   - Locate recently modified functions, components, or modules.
+   - Use git diff, editor change history, or explicit user instructions as guidance.
+
+2. **Analyze for improvements**
+   - Look for duplicated logic, unnecessary abstractions, and overly complex control flow.
+   - Check consistency with nearby code and project standards.
+   - Pay attention to error handling, naming, and structure.
+
+3. **Refine the implementation**
+   - Simplify conditionals and loops while preserving all branches and edge cases.
+   - Consolidate related logic into well-named helpers when it improves clarity.
+   - Replace nested ternaries with clearer `if/else` or `switch`.
+   - Remove redundant checks, parameters, or temporary variables that add no clarity.
+   - Keep function signatures and external contracts the same unless explicitly allowed to change them.
+
+4. **Validate behavior**
+   - Re-check the refined code against original behavior.
+   - Ensure all inputs, outputs, side effects, and error cases are preserved.
+   - Where possible, rely on existing tests or usage examples to confirm equivalence.
+
+5. **Document meaningful changes**
+   - Only call out changes that affect how someone reasons about or maintains the code.
+   - Summarize structural changes (e.g., "extracted validation into helper", "replaced nested ternaries with switch").
+   - Avoid narrating trivial edits such as formatting or simple renames when they are obvious.
+
+## Autonomy and Usage Pattern
+
+- The agent may proactively apply this skill:
+  - Immediately after generating or editing code.
+  - When the user asks to "simplify", "clean up", "refine", or "polish" code.
+- Always prioritize:
+  - **Correctness first**
+  - **Clarity and maintainability second**
+  - **Brevity only when it does not harm readability**
+
+## Notes
+
+- If `CLAUDE.md` or other project guidelines conflict with these instructions, prefer the **project-specific** rules.
+- Never introduce breaking API changes, remove features, or alter user-visible behavior unless the user explicitly requests such changes.
+

package/template/skills/frontend-design/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
+license: Complete terms in LICENSE.txt
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
+
+