skills.rest
leenBaksh
leenBakshCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-skill

Guide React, Next.js, and Tailwind CSS frontend implementations with component architecture and styling guidelines.

1|Updated Feb 2, 2026
Search Tags:#accessibility#frontend#react#nextjs#tailwind#design-system#ui-components
One-click install
npx skills add https://github.com/leenBaksh/Hackathon-II-Phase --skill frontend-skill-leenbaksh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/leenBaksh/Hackathon-II-Phase/tree/main/phase-II-Task-todo/.claude/skills/frontend-skill
Command: npx skills add https://github.com/leenBaksh/Hackathon-II-Phase --skill frontend-skill-leenbaksh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend complexity often leads to inconsistent UI across teams and projects; this skill provides a structured approach to building responsive pages, reusable components, and maintainable styling to ensure scalable web interfaces.

Core Features & Use Cases

  • Atomic design-based component architecture with atoms, molecules, and organisms
  • Page structure with layout components, page-level views, and nested routing
  • Styling approach using Tailwind, CSS modules, and design tokens for consistency
  • Best practices: accessibility, performance optimizations, and consistent naming conventions

Quick Start

Create a new Next.js app, install Tailwind CSS, and begin implementing a layout with reusable components following the patterns outlined in this Skill.

Frequently Asked Questions about frontend-skill

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

FAQPage Schema
How do I structure reusable React components for a scalable design system?▼

Structure scalable React components using atomic design architecture, dividing them into atoms, molecules, and organisms. This maintains UI consistency and accelerates development across web applications.

What's the best way to organize Next.js page structure and nested routing?▼

Organize Next.js page structure by separating layout components from page-level views. This nested routing approach ensures maintainable frontend deliverables and reliable page architecture across your web application.

How do I maintain consistent styling using Tailwind CSS and design tokens?▼

Maintain consistent styling using Tailwind CSS, CSS modules, and design tokens. This combination enforces consistent naming conventions and visual coherence across all reusable components in your frontend deliverables.

Does this frontend approach support accessibility and performance optimizations?▼

Yes, this frontend approach explicitly includes accessibility and performance optimizations as core best practices. It ensures responsive pages and reliable, maintainable web interfaces without compromising user experience.

Why does my frontend UI become inconsistent across different projects?▼

Frontend UI becomes inconsistent without a structured approach to component architecture and styling. Implementing design tokens and atomic design patterns ensures scalable, maintainable, and consistent web interfaces across teams.

Related Skills

Explore More Software Engineering Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
ky-zoky-zo

frontend-design

Generate production-grade frontend interfaces with typography, color, spacing, and responsive layouts.

Community
Advanced
taewook486taewook486

moai-lang-typescript

Support TypeScript 5.9+ development with React 19, Next.js 16, and tRPC.

Community
Advanced
Prorise-coolProrise-cool
24

frontend-specialist

Develop user-facing interfaces with React, Vue, and Angular.

Community
Advanced