flitzrrr/frontend-design-skills

Opinionated web design skills from curated sources — one install, every major AI coding tool (Claude Code, Cursor, Windsurf, Gemini, Codex, Aider)

This repository also configures its own agents. See what frontend-design-skills tells them →

5Stars on the repository
26Mods indexed here, across every type
5mo agoLast push, which is what freshness is scored on
MITLicence, which decides whether bodies are shown

accessibility

02

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

WCAG conformance, BFSG compliance, semantic HTML, ARIA, keyboard navigation, contrast, forms, and assistive technologies. Defines binding rules for accessible web interfaces per WCAG 2.1 AA.

not rated 5 5mo ago A 46 tokens original MIT

agent-ui-design

03

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Design patterns for chat interfaces, agent UX, streaming UI, and tool visualization. Covers chat architecture, message types, streaming rendering, tool execution cards, and sandbox UI derived from 21st.dev Agents SDK documentation and templates.

not rated 5 5mo ago A 49 tokens original MIT

ai-design-workflow

04

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

AI tool integration into the design process, structured prompting for designers, creative AI usage with clear boundaries, and review workflows.

not rated 5 5mo ago A 29 tokens original MIT

branding-identity

05

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Brand strategy, visual identity, positioning, corporate design, portfolio presentation, and consistent brand management across all digital touchpoints.

not rated 5 5mo ago A 28 tokens original MIT

color-theory

06

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Color models, palettes, contrast, color psychology, color harmonies, and dark mode for web projects. Defines the 60-30-10 rule, semantic color coding, design tokens, and WCAG contrast requirements.

not rated 5 5mo ago A 48 tokens original MIT

component-patterns

07

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Modern UI component selection, composition, and theming patterns for web applications. Covers compound components, design tokens, variant systems, responsive patterns, and form architecture derived from 21st.dev SDK, Godly featured products, and current best practices.

not rated 5 5mo ago A 53 tokens original MIT

customer-journey

08

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Personas, touchpoint mapping, phase models, onboarding, customer retention, and data-driven journey analysis for user-centered web design.

not rated 5 5mo ago A 31 tokens original MIT

design-process

09

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Briefing, concept development, wireframing, prototyping, visual design, review, and handoff -- the structured path from requirements to finished design.

not rated 5 5mo ago A 34 tokens original MIT

design-trends

10

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Current award-winning design patterns and emerging techniques in web design (Q1/Q2 2026). Covers motion, typography, color, layout innovations, and interaction patterns derived from Awwwards, CSSDA, Godly, and SiteInspire analysis. Structured for periodic updates.

not rated 5 5mo ago A 60 tokens original MIT

images-media

11

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Image strategy, visual concepts, technical optimization, SVG, icons, lazy loading, and the strategic use of images and media in web design.

not rated 5 5mo ago A 31 tokens original MIT

landing-pages

12

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Conversion-oriented page structure, CTA design, above-the-fold optimization, page types, and A/B testing for maximum conversion rates.

not rated 5 5mo ago A 28 tokens original MIT

navigation-design

13

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Menu patterns, breadcrumbs, search functionality, information architecture, and user flow. Navigation as the backbone of every website with accessible implementation.

not rated 5 5mo ago A 29 tokens original MIT

responsive-design

14

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Mobile-first strategy, breakpoints, fluid layouts, content choreography, and cross-device optimization with CSS Grid, Flexbox, and modern responsive techniques.

not rated 5 5mo ago A 32 tokens original MIT

ui-design

15

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Layouts, components, visual hierarchy, grid systems, and design systems for professional web interfaces. Defines rules for grid systems, whitespace, styleguides, design tokens, and UI patterns.

not rated 5 5mo ago A 40 tokens original MIT

ui-patterns

16

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Proven, real-world UI interaction patterns from shipped products. Covers hero sections, navigation, cards, pricing, testimonials, CTAs, forms, and footer patterns derived from SiteInspire, CSSDA, Godly, Lapa Ninja, and CSS Winner analysis.

not rated 5 5mo ago A 57 tokens original MIT

usability

17

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Heuristic evaluation, conversion optimization, form design, error handling, and usability as a measurable quality criterion per ISO 9241 and Nielsen heuristics.

not rated 5 5mo ago A 33 tokens original MIT

ux-design

18

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

User research, interaction patterns, information architecture, and UX methods. Defines the five-plane model, user flows, UX laws, and validation methods for user-centered digital products.

not rated 5 5mo ago A 37 tokens original MIT

visual-direction

19

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Current visual direction for web projects covering color palettes, font pairings, layout compositions, and imagery (Q1/Q2 2026). Derived from Dribbble trending, Behance top projects, Land-book curation, and Godly featured sites. Structured for periodic updates.

not rated 5 5mo ago A 59 tokens original MIT

web-typography

20

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Font selection, font pairing, typographic scales, line height, line length, and CSS implementation for web typography. Defines rules for readable, performant, and hierarchically structured text design.

not rated 5 5mo ago A 43 tokens original MIT

webdesign-review

21

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Meta-skill for comprehensive web design reviews. Orchestrates all 20 domain skills for systematic analysis of websites, designs, and prototypes against enterprise design standards.

not rated 5 5mo ago A 36 tokens original MIT

website-audit

22

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Systematic website analysis, relaunch planning, SEO migration, content audit, and post-launch monitoring for data-driven relaunches.

not rated 5 5mo ago A 30 tokens original MIT

At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: