frontend-design

Files (14)

• .gitignore
• LICENSE
• OPTIMIZATION_SUMMARY.md
• README.md
• SKILL.md
• components.css · examples/css/
• tokens.css · examples/css/
• design-tokens.ts · examples/typescript/
• sample-components.tsx · examples/typescript/
• theme-provider.tsx · examples/typescript/
• utils.ts · examples/typescript/
• package.json
• globals.css · templates/
• tailwind.config.js · templates/

SKILL.md (first lines)

# Frontend Design Skill — Systematic & Creative Web Development

**Skill Location**: `{project_path}/skills/frontend-design/`

This skill transforms vague UI style requirements into executable, production-grade frontend code through a systematic design token approach while maintaining creative excellence. It ensures visual consistency, accessibility compliance, and maintainability across all deliverables.

---

## When to Use This Skill (Trigger Patterns)

**MUST apply this skill when:**

- User requests any website, web application, or web component development
- User mentions design styles: "modern", "premium", "minimalist", "dark mode", "SaaS-style"
- Building dashboards, landing pages, admin panels, or any web UI
- User asks to "make it look better" or "improve the design"
- Creating component libraries or design systems
- User specifies frameworks: React, Vue, Svelte, Next.js, Nuxt, etc.
- Converting designs/mockups to code
- User mentions: Tailwind CSS, shadcn/ui, Material-UI, Chakra UI, etc.

**Trigger phrases:**
- "build a website/app/component"
- "create a dashboard/landing page"
- "design a UI for..."
- "make it modern/clean/premium"
- "style this with..."
- "convert this design to code"

**DO NOT use for:**
- Backend API development
- Pure logic/algorithm implementation
- Non-visual code tasks

---

## Skill Architecture

This skill provides:

1. **SKILL.md** (this file): Core methodology and guidelines
2. **examples/css/**: Production-ready CSS examples
   - `tokens.css` - Design token system
   - `components.css` - Reusable component styles
   - `utilities.css` - Utility classes
3. **examples/typescript/**: TypeScript implementation examples
   - `design-tokens.ts` - Type-safe token definitions
   - `theme-provider.tsx` - Theme management
   - `sample-components.tsx` - Component examples
4. **templates/**: Quick-start templates
   - `tailwind-config.js` - Tailwind configuration
   - `globals.css` - Global styles template

---

## Core Principles (Non-Negotiable)

### 1. **Dual-Mode Thinking: System + Creativity**

**Systematic Foundation:**
- Design tokens first, UI components second
- No arbitrary hardcoded values (colors, spacing, shadows, radius)
- Consistent scales for typography, spacing, radius, elevation
- Complete state coverage (default/hover/active/focus/disabled + loading/empty/error)
- Accessibility as a constraint, not an afterthought

**Creative Execution:**
- AVOID generic "AI slop" aesthetics (Inter/Roboto fonts, purple gradients, cookie-cutter layouts)
- Choose BOLD aesthetic direction: brutalist, retro-futuristic, luxury, playful, editorial, etc.
- Make unexpected choices in typography, color, layout, and motion
- Each design should feel unique and intentionally crafted for its context

### 2. **Tokens-First Methodology**

```
Design Tokens → Component Styles → Page Layouts → Interactive States
```

**Never skip token definition.** All visual properties must derive from the token system.

### 3. **Tech Stack Flexibility**

**Default stack (if unspecified):**
- Framework: React + TypeScript
- Styling: Tailwind CSS
- Components: shadcn/ui
- Theme: CSS custom properties (light/dark modes)

**Supported alternatives:**
- Frameworks: Vue, Svelte, Angular, vanilla HTML/CSS
- Styling: CSS Modules, SCSS, Styled Components, Emotion
- Libraries: MUI, Ant Design, Chakra UI, Headless UI

### 4. **Tailwind CSS Best Practices**

**⚠️ CRITICAL: Never use Tailwind via CDN**

**MUST use build-time integration:**
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

**Why build-time is mandatory:**
- ✅ Enables tree-shaking (2-15KB vs 400KB+ bundle)
- ✅ Full design token customization
- ✅ IDE autocomplete and type safety
- ✅ Integrates with bundlers (Vite, webpack, Next.js)

**CDN only acceptable for:**
- Quick prototypes/demos
- Internal testing

---

## Implementation Workflow

### Phase 1: Design Analysis & Token Definition

From rahlplx/smile-savers-2026-feb, MIT.

More from rahlplx/smile-savers-2026-feb