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.
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.
Teams using designing-frontend should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
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
designing-database-schemas
Process use when you need to work with database schema design. This skill provides schema design and migrations with comprehensive guidance and automation. Trigger with phrases like "design schema", "create migration", or "model database".
premium-frontend-ui
A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.
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-security-coder
Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns. Use PROACTIVELY for frontend security implementations or client-side security code reviews.
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-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.