skills.rest
jlaws
jlawsCOMMUNITY
Explore all skills by this author →
GitHub

cmd-frontend-frontend

Diagnose frontend project setups for UI components across React, Next.js, and Svelte.

2|Updated Jan 3, 2026
Search Tags:#frontend#react#framework#nextjs#design-system#ui-patterns
One-click install
npx skills add https://github.com/jlaws/dotfiles --skill cmd-frontend-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cmd-frontend-frontend
Source: https://github.com/jlaws/dotfiles/tree/main/.agents/skills/cmd-frontend-frontend
Command: npx skills add https://github.com/jlaws/dotfiles --skill cmd-frontend-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Frontend Consultation Skill helps teams quickly diagnose and align frontend stacks by identifying the framework, styling approach, and component structure of a project, enabling faster design system decisions and implementation plans.

Core Features & Use Cases

  • Detect frontend framework automatically from config files and package.json
  • Identify styling approach (Tailwind, CSS modules, styled-components, design tokens)
  • Check component structure and design system readiness to scope work
  • Use case: when starting a new UI module, you can rapidly understand the existing stack and recommended integration paths.

Quick Start

Describe your target component or page and I will analyze the frontend setup and propose a plan.

Frequently Asked Questions about cmd-frontend-frontend

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

FAQPage Schema
How do I detect the frontend framework used in a project?▼

Frontend framework detection involves scanning config files and package.json to identify React, Next.js, or Svelte setups and assess the project's framework choices and architecture.

What is the best way to identify a CSS styling approach in an existing codebase?▼

To identify a CSS styling approach, scan the project structure to detect methods like Tailwind, CSS modules, styled-components, or design tokens used for UI components.

Can I use this to check design system readiness when starting a new UI module?▼

Yes, you can check design system readiness by evaluating the existing component structure and styling approach to scope work and propose an actionable integration plan.

Does this frontend consultation support React and Next.js project stacks?▼

Yes, this frontend consultation supports React and Next.js project stacks, alongside Svelte, to diagnose UI component setups and provide actionable framework recommendations.

How to scope work for a new UI page using existing frontend patterns?▼

To scope work for a new UI page, diagnose the current frontend setup, identify the framework and styling method, and map the component architecture to formulate an implementation plan.

Related Skills

Explore More Software Engineering Skills→
drvossdrvoss
42

stack-detector

Detect a repository's technology stack and map it to Copilot skills and rules.

Community
Intermediate
darblexdarblex

ui-ux-pro-max

Generate design systems and frontend UI code for web frameworks.

Community
Advanced
Canhada-LabsCanhada-Labs
2

Design System & Component Architecture

Governs design tokens and component architecture standards for frontend development and review workflows.

Official
Advanced
Sir-chawakornSir-chawakorn
33

code-generation

Generate React components, Next.js API routes, and project templates.

Community
Intermediate