skills.rest
jamesrochabrun
jamesrochabrunCOMMUNITY
Explore all skills by this author →
Website𝕏@jamesrochabrunGitHub

frontend-designer

Automate accessible, responsive frontend UI component design and implementation.

194|26|Updated Oct 20, 2025
Search Tags:#design#accessibility#frontend#css#responsive
One-click install
npx skills add https://github.com/jamesrochabrun/skills --skill frontend-designer-jamesrochabrun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-designer
Source: https://github.com/jamesrochabrun/skills/tree/main/skills/frontend-designer
Command: npx skills add https://github.com/jamesrochabrun/skills --skill frontend-designer-jamesrochabrun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Designing accessible, responsive frontend components is complex; this Skill provides tokens, patterns, and practical guidelines to accelerate production.

Core Features & Use Cases

  • Component Design & Development: Reusable, accessible components.
  • Design Systems: Tokens, patterns, docs.
  • Responsive Design: Mobile-first patterns.
  • Accessibility (WCAG 2.1): Inclusive patterns.
  • Performance: Optimized frontends.
  • Design System Alignment: Tokens & components syncing.

Quick Start

Say: "Create a responsive, accessible Button using the design system tokens" and get a ready-to-use component scaffold.

Frequently Asked Questions about frontend-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible, responsive frontend components?▼

Accessible, responsive components require semantic HTML, keyboard navigation, focus management, and CSS patterns like Flexbox/Grid. This Skill provides design tokens, WCAG 2.1 AA patterns, and ready-to-use component scaffolds across React, Vue, Svelte, and framework-agnostic implementations to accelerate production delivery.

Can I use design tokens to keep components and designs in sync?▼

Design tokens bridge design systems and code by centralizing values for colors, spacing, typography, and responsive breakpoints. This Skill integrates tokens into component design workflows, enabling consistent token-driven components across your frontend stack and design system documentation.

What's the best way to implement WCAG 2.1 AA compliance in React, Vue, and Svelte components?▼

WCAG 2.1 AA compliance requires semantic HTML, keyboard navigation, focus management, and screen reader support. This Skill provides accessible patterns and implementation guidelines for React, Vue, Svelte, and framework-agnostic components, addressing functional and technical compliance requirements in production.

How do I create responsive CSS patterns that work on mobile and desktop?▼

Mobile-first responsive design uses CSS Flexbox and Grid with media queries to adapt layouts across breakpoints. This Skill delivers tested responsive patterns, design tokens for breakpoints, and performance optimizations like lazy loading to build scalable frontends that work across all screen sizes.

Does this approach work for design-system-driven projects?▼

Yes. This Skill is built for design-system projects, providing component design patterns, design tokens, design-to-code workflows, and production-ready guidelines. It covers semantic HTML, keyboard navigation, responsive CSS, and performance optimizations aligned with design system requirements.

What performance optimizations should I apply to accessible components?▼

Accessible frontend components benefit from lazy loading, minimal CSS/JavaScript, and efficient rendering patterns. This Skill includes performance optimization techniques integrated with accessibility and responsive design patterns to deliver inclusive, fast components in production environments.

Related Skills

Explore More Design & Creative Skills→
claudioborjaclaudioborja

skill-ui-ux

Design and implement accessible UI components and design systems across frameworks.

Community
Advanced
yun520-1yun520-1
38

system-architect

Generates system architecture blueprints, tech stack recommendations, and documentation templates.

Community
Intermediate
jg-chalk-iojg-chalk-io

moai-design-systems

Automate design system creation and validation with tokens, components, and WCAG 2.2 checks.

Community
Advanced
lengo0951lengo0951

ui-styling

Style React user interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced