skills.rest
BasharAmso
BasharAmsoCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Development

Coordinate React/Next.js frontend tasks from design brief to UI components.

1|Updated Mar 11, 2026
Search Tags:#design#ui#accessibility#frontend#react#component#responsive
One-click install
npx skills add https://github.com/BasharAmso/Bashi --skill frontend-development-basharamso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Development
Source: https://github.com/BasharAmso/Bashi/tree/main/create-bashi-app/template/.claude/skills/frontend-dev
Command: npx skills add https://github.com/BasharAmso/Bashi --skill frontend-development-basharamso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development often suffers from misaligned designs, inconsistent UI patterns, and slow handoffs between design and implementation. This skill establishes a structured approach to turning product briefs into polished user interfaces that look and behave consistently across devices.

Core Features & Use Cases

  • Provides a repeatable workflow to translate design tokens, accessibility requirements, and brand guidelines into React/Next.js components.
  • Ensures mobile-first responsive layouts, accessible markup, and a visual polish pass before delivery.
  • Use Case: When you need a new dashboard page, implement components, layouts, and styles that align with DECISIONS.md and PRD/GDD, then update STATE.md with the outcome.

Quick Start

Open your project in VS Code and run the frontend development workflow by typing the start command.

Frequently Asked Questions about Frontend Development

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

FAQPage Schema
How do I turn a design brief into production-ready React components?▼

To turn a design brief into production-ready React components, this frontend skill coordinates task execution by translating design tokens and brand guidelines into accessible, responsive UI components using Tailwind or CSS-in-JS.

What is the best way to ensure mobile-first responsiveness in Next.js projects?▼

The best way to ensure mobile-first responsiveness in Next.js projects is to apply a structured frontend workflow that enforces responsive layouts, accessible markup, and a visual polish pass before delivery.

How do I maintain accessibility standards when implementing UI with Tailwind or CSS-in-JS?▼

Maintaining accessibility standards with Tailwind or CSS-in-JS involves following a structured implementation workflow that ensures accessible markup and visual polish are applied during component generation.

Can I use this frontend workflow for existing React and Next.js projects?▼

Yes, you can use this workflow with existing React and Next.js projects to implement UI components, align styles with DECISIONS.md and PRD/GDD, and update STATE.md with the task outcome.

How do I manage state handling and log decisions during frontend UI development?▼

State handling and decision logging during frontend UI development are managed by logging implementation decisions to DECISIONS.md and updating STATE.md with the final outcome after satisfying visual polish guidelines.

How to fix misaligned designs and inconsistent UI patterns during frontend handoff?▼

Fixing misaligned designs and inconsistent UI patterns involves using a structured approach to translate product briefs into polished interfaces that look and behave consistently across devices.

Related Skills

Explore More Software Engineering Skills→
ncsound919ncsound919

ui-ux-pro-max

Generate design-system tokens, component specs, and accessibility guidance for web stacks.

Community
Advanced
BasharAmsoBasharAmso
1

Documentation

Generate publish-ready project documentation from existing code and decisions.

Community
Advanced
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic