designing-frontend
Build distinctive, production-grade frontend interfaces with memorable aesthetics. Use when creating web components, pages, or applications. Prioritizes creative, context-specific design over generic patterns.
Best use case
designing-frontend is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Build distinctive, production-grade frontend interfaces with memorable aesthetics. Use when creating web components, pages, or applications. Prioritizes creative, context-specific design over generic patterns.
Build distinctive, production-grade frontend interfaces with memorable aesthetics. Use when creating web components, pages, or applications. Prioritizes creative, context-specific design over generic patterns.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "designing-frontend" skill to help with this workflow task. Context: Build distinctive, production-grade frontend interfaces with memorable aesthetics. Use when creating web components, pages, or applications. Prioritizes creative, context-specific design over generic patterns.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/designing-frontend/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How designing-frontend Compares
| Feature / Agent | designing-frontend | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Build distinctive, production-grade frontend interfaces with memorable aesthetics. Use when creating web components, pages, or applications. Prioritizes creative, context-specific design over generic patterns.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Designing Frontend ## Workflow 1. **Conceptualize** - Identify purpose and user context - Choose a bold aesthetic direction (brutally minimal, maximalist, retro-futuristic, organic, luxury, brutalist, etc.) - Define the one unforgettable element - Note technical constraints (framework, performance, accessibility) 2. **Implement** - Write production-grade code (HTML/CSS/JS, React, Vue, etc.) - Apply aesthetic guidelines below 3. **Verify** - Check visual hierarchy and cohesion - Test interactions and animations - Validate accessibility requirements - Confirm no generic patterns emerged 4. **Iterate** - Refine details based on verification - Enhance distinctiveness where needed ## Aesthetic Guidelines **Typography** - Use distinctive, characterful fonts (avoid Inter, Roboto, Arial, system fonts) - Pair expressive display fonts with refined body fonts **Color & Theme** - Build cohesive palettes with CSS variables - Use dominant colors with sharp accents, not evenly-distributed schemes - Avoid clichéd combinations (purple gradients on white) **Motion** - Create high-impact moments with orchestrated page loads and staggered reveals - Use CSS animations for HTML; Motion library for React - Add surprising hover states and scroll-triggered effects **Spatial Composition** - Break from grid conventions: asymmetry, overlap, diagonal flow - Use generous negative space OR intentional density **Backgrounds & Visual Effects** - Layer gradient meshes, noise textures, geometric patterns - Apply contextual effects: layered transparencies, dramatic shadows, decorative borders - Add atmosphere through depth and texture ## Implementation Principles - **Match complexity to vision**: Maximalist designs require elaborate code; minimalist designs demand precision in spacing and typography - **Vary every design**: Different fonts, themes, aesthetics for each project - **Never converge**: Avoid repeated choices (Space Grotesk, common layouts) - **Context-specific**: Design should feel genuinely crafted for its purpose
Related Skills
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
frontend-mobile-security-xss-scan
You are a frontend security specialist focusing on Cross-Site Scripting (XSS) vulnerability detection and prevention. Analyze React, Vue, Angular, and vanilla JavaScript code to identify injection poi
frontend-mobile-development-component-scaffold
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
frontend-developer
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
cc-skill-frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
frontend-dev
Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
frontend-code-review
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
designing-components
Use this skill when you need to design a component
frontend-responsive
Implement mobile-first responsive designs with fluid layouts, breakpoints, relative units, and touch-friendly interfaces that work across all device sizes. Use this skill when writing or modifying React components (.tsx, .jsx files), when implementing CSS or Tailwind responsive utilities (sm:, md:, lg:, xl: breakpoints), when working on layout components, navigation menus, grid systems, when optimizing for mobile devices, tablets, or desktop screens, when implementing media queries, when ensuring touch-friendly UI elements, or when testing cross-device compatibility.
frontend-css
Write consistent, maintainable CSS following the project's methodology (Tailwind utility classes) while minimizing custom CSS and adhering to design system tokens. Use this skill when writing or editing CSS files, Tailwind classes in React components (.tsx, .jsx files), when implementing design system colors/spacing/typography, when using Tailwind utility classes, when deciding between framework utilities vs. custom CSS, when optimizing CSS for production with tree-shaking, when configuring Tailwind theme extensions, or when maintaining design consistency across the application.