Frontend Excellence v1.0 🚀

Frontend Excellence v1.0 is an open-source, production-grade Frontend Engineering & UI/UX AI Skill designed for AI coding agents (Claude Code, Gemini CLI, Cursor, Windsurf, GitHub Copilot, Codex).

It transforms AI coding assistants from basic prompt-followers into world-class frontend architects that enforce mathematical layout systems, semantic HSL design tokens, WCAG AAA accessibility standards, and multi-state component engineering.

⚡ Quick Start (Instant Installation via NPM)

Install into your current project or global agent environment in 5 seconds:

# Interactive installation (Local workspace, Cursor rules, CLAUDE.md, or Global)
npx frontend-excellence init

# Install directly to local project workspace (.agents/skills/ & CLAUDE.md & .cursor/rules)
npx frontend-excellence --local

# Install globally for all projects (~/.gemini/config/skills/)
npx frontend-excellence install --global

Or install globally via npm:

npm install -g frontend-excellence
frontend-excellence init

🤖 Agent Compatibility

| AI Agent / CLI Tool | Installation Path | Setup Method | | :--- | :--- | :--- | | Claude Code CLI | CLAUDE.md / .agents/skills/ | npx frontend-excellence init | | Gemini CLI / Antigravity | .agents/skills/frontend-excellence/ | npx frontend-excellence init | | Cursor | .cursor/rules/frontend-excellence.mdc | npx frontend-excellence init | | Windsurf | .windsurfrules / .agents/skills/ | npx frontend-excellence init | | GitHub Copilot Agent | .github/copilot-instructions.md | Ingests SKILL.md reference | | Custom Agents / Codex | .agents/skills/frontend-excellence/SKILL.md | Direct markdown ingestion |

📐 What Frontend Excellence Enforces

• 8pt / 4pt Mathematical Grid: Zero arbitrary margins, paddings, or gaps. Everything aligns strictly to grid multiples.
• Semantic HSL Token System: High-contrast, theme-switchable, accessible HSL scales (--color-primary, --color-surface, --color-text).
• WCAG AAA Accessibility: Mandatory keyboard focus rings, screen reader landmarks, semantic HTML5, and touch target minimums (44x44px).
• Multi-State Component Matrix: Every component is authored with all 8 operational states: default, hover, focus, pressed, disabled, loading, error, active.
• Communicative Micro-Interactions: Physics-based spring animations (cubic-bezier(0.16, 1, 0.3, 1)), zero decorative fluff.
• Framework Adapters: Pre-packaged guides for React Server/Client Components, Next.js App Router, Tailwind CSS, Vanilla CSS, Vue, and Svelte.

📁 Repository & Skill Architecture

frontend-excellence/
├── package.json                      # NPM package & binary entrypoint
├── bin/cli.js                        # Node.js 1-command installer script
│
└── .agents/skills/frontend-excellence/
    ├── SKILL.md                      # Primary Skill Entrypoint (YAML frontmatter + pipeline)
    ├── manifest.json                 # Skill metadata
    │
    ├── philosophy/                   # Engineering mindset & visual rhythm
    │   ├── engineering.md
    │   ├── ui-philosophy.md
    │   └── product-thinking.md
    │
    ├── knowledge/                    # Domain knowledge & mathematical systems
    │   ├── layout_grid.md
    │   ├── typography.md
    │   ├── color_system.md
    │   ├── accessibility.md
    │   ├── motion_micro.md
    │   └── responsive_design.md
    │
    ├── architecture/                 # Component design & token management
    │   ├── component_design.md
    │   ├── state_management.md
    │   ├── design_tokens.md
    │   └── scalability_patterns.md
    │
    ├── workflows/                    # Actionable execution pipelines
    │   ├── build_component.md
    │   ├── create_page.md
    │   ├── review_refactor_ui.md
    │   └── responsive_conversion.md
    │
    ├── checklists/                   # Pre-flight self-critique gates
    │   ├── ui_ux_review.md
    │   ├── accessibility_audit.md
    │   ├── performance_audit.md
    │   └── production_readiness.md
    │
    └── adapters/                     # Framework adapters
        ├── react_nextjs.md
        ├── tailwind_css.md
        ├── vanilla_css.md
        └── vue_svelte.md

📄 License

MIT © Frontend Excellence Contributors