# Frontend Design

> frontend-design

- Skill: `abdullah1854-claudesuperskills/frontend-design` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add abdullah1854-claudesuperskills/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/abdullah1854-claudesuperskills/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: abdullah1854 (https://skillmd.com/u/abdullah1854-claudesuperskills)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/abdullah1854-claudesuperskills/frontend-design

---

# frontend-design

Distinctive, production-grade frontend interfaces with high design quality. Avoids generic AI aesthetics. Use when: building UI components, creating landing pages, implementing responsive designs.

## Metadata
- **Version**: 1.0.0
- **Category**: code-quality
- **Source**: workspace


## Tags
`frontend`, `design`, `ui`, `ux`, `tailwind`, `components`, `responsive`

## MCP Dependencies
None specified

## Inputs
- `component` (string) (required): Component type: landing, dashboard, form, card, navigation
- `style` (string) (optional): Style: minimal, bold, glassmorphism, brutalist, corporate
- `framework` (string) (optional): Framework: react, nextjs, vue, svelte

## Chain of Thought
1. Understand component requirements. 2. Select distinctive design pattern (avoid generic). 3. Choose color palette with intention. 4. Implement with accessibility in mind. 5. Add micro-interactions. 6. Ensure responsive behavior.


## Workflow
No workflow defined

## Anti-Hallucination Rules
None specified

## Verification Checklist
None specified

## Usage

```typescript
// Execute via MCP Gateway:
gateway_execute_skill({ name: "frontend-design", inputs: { ... } })

// Or via REST API:
// POST /api/code/skills/frontend-design/execute
// Body: { "inputs": { ... } }
```



## Code

```typescript
// Frontend Design Skill
const component = inputs.component || 'landing';
const style = inputs.style || 'minimal';

console.log(\`## Frontend Design: \${component} (\${style})

### Design Principles (Avoid Generic AI Look)

1. **Asymmetry Over Symmetry** - Break grid occasionally
2. **Intentional White Space** - Let elements breathe
3. **Custom Accent Colors** - Not default Tailwind blues
4. **Subtle Animations** - 150-300ms transitions
5. **Typography Hierarchy** - 3-4 sizes max
6. **Real Content** - No lorem ipsum in demos

### Style Guide: \${style}

\${style === 'minimal' ? \`
- Monochrome with single accent
- Thin borders (1px)
- Large padding (p-8, p-12)
- System fonts or Inter
- Subtle shadows (shadow-sm)
\` : style === 'bold' ? \`
- High contrast colors
- Large typography (text-5xl+)
- Thick borders (border-4)
- Geometric shapes
- Strong shadows
\` : style === 'glassmorphism' ? \`
- backdrop-blur-xl
- bg-white/10 backgrounds
- Subtle borders (border-white/20)
- Gradient backgrounds
- Soft shadows
\` : \`
- Clean professional look
- Structured grid layouts
- Brand-consistent colors
- Clear CTAs
\`}

### Component Patterns

\`\`\`tsx
// Avoid: Generic centered hero
<div className="flex flex-col items-center text-center">

// Better: Asymmetric layout with character
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr,1fr] gap-16">
  <div className="space-y-8">
    <h1 className="text-6xl font-bold tracking-tight">
      <span className="text-neutral-900">Build</span>
      <span className="text-orange-500 ml-2">faster.</span>
    </h1>
  </div>
</div>
\`\`\`

### Color Palette Suggestions

Instead of: \`blue-500\`, \`gray-100\`
Try: \`orange-500\`, \`neutral-950\`, \`amber-400\`

### Micro-Interactions

\`\`\`tsx
// Button hover
className="transition-all duration-200 hover:scale-[1.02] hover:shadow-lg"

// Card hover
className="group hover:border-orange-500/50 transition-colors"
\`\`\`
\`);
```

---
Created: Tue Dec 23 2025 00:32:50 GMT+0800 (Singapore Standard Time)
Updated: Tue Dec 23 2025 00:32:50 GMT+0800 (Singapore Standard Time)