skills.rest
abdullah1854
abdullah1854COMMUNITY
Explore all skills by this author →
GitHub

frontend-build

Generate Markdown ADRs with sections and auto-assigned numbers from structured inputs.

1|Updated Dec 22, 2025
Search Tags:#design#accessibility#frontend#react#tailwind
One-click install
npx skills add https://github.com/abdullah1854/ClaudeSuperSkills --skill frontend-build
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-build
Source: https://github.com/abdullah1854/ClaudeSuperSkills/tree/main/frontend-build
Command: npx skills add https://github.com/abdullah1854/ClaudeSuperSkills --skill frontend-build

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building polished, scalable frontends requires clear design direction and robust patterns. This Skill codifies a production-grade approach to frontend development with a focus on aesthetics, accessibility, and performance.

Core Features & Use Cases

  • Design direction: Bold, intentional aesthetics with principled constraints.
  • Component patterns: Reusable, accessible UI primitives.
  • Responsive strategy: Mobile-first and breakpoint-intentional layouts.

Quick Start

Create a simple responsive component and integrate it into a small page scaffold.

Frequently Asked Questions about frontend-build

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

FAQPage Schema
How do I build accessible, responsive React components with Tailwind?▼

Build accessible React components by applying semantic HTML, ARIA attributes, and keyboard navigation patterns, then style them with Tailwind's utility classes using mobile-first breakpoints. This Skill provides production-grade component patterns that enforce accessibility and responsive design constraints from the ground up.

What's the best way to structure a scalable frontend design system?▼

Structure a design system by defining reusable, accessible UI primitives with intentional aesthetic constraints, then compose them into responsive layouts. This Skill codifies that approach with principled component patterns and mobile-first breakpoint strategy.

How do I ensure my frontend design is both polished and performant?▼

Ensure polish and performance by combining intentional design direction with responsive, accessible patterns that minimize layout thrashing and unnecessary renders. This Skill applies production-grade practices across aesthetics, accessibility, and performance optimization.

Can I use Tailwind CSS for accessible component design?▼

Yes. Tailwind's utility-first approach works well for accessible design when paired with semantic HTML and proper ARIA patterns. This Skill demonstrates how to integrate Tailwind with accessibility constraints and responsive breakpoints.

What design patterns work best for mobile-first React layouts?▼

Mobile-first layouts prioritize base styles for small screens, then add breakpoint-specific rules as viewport widens. This Skill applies that strategy with Tailwind and React to create intentional, responsive component hierarchies.

Related Skills

Explore More Software Engineering Skills→
liminal-ailiminal-ai

tailwind-design-system

Centralize design tokens, components, and patterns in Tailwind CSS v4.

Official
Advanced
juburrjuburr
1

react-storybook

Build and validate React-TypeScript components with Storybook CSF3 stories.

Community
Advanced
ForgePlanForgePlan
3

canvas-storybook-test

Automate Storybook story testing against design specifications with Vitest, axe-core, and Chromatic.

Official
Advanced
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic