frontend-first-principles

Decompose frontend requirements and evaluate solution options against core principles.

Updated Jan 31, 2026
One-click install
npx skills add https://github.com/gihwan-dev/claude-setup --skill frontend-first-principles
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-first-principles
Source: https://github.com/gihwan-dev/claude-setup/tree/main/skills/frontend-first-principles
Command: npx skills add https://github.com/gihwan-dev/claude-setup --skill frontend-first-principles

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps ensure that frontend feature planning and UI flow changes are based on sound principles before implementation, preventing costly rework and ensuring the right technical decisions are made early.

Core Features & Use Cases

  • Requirement Decomposition: Separates hard constraints from assumptions and inherited patterns.
  • First Principles Extraction: Identifies core user intent, data sources, and rendering/interaction constraints.
  • Solution Comparison: Generates and evaluates multiple solution directions based on simplicity, maintainability, accessibility, performance, and UX risk.
  • Use Case: Planning a new complex user dashboard with multiple data sources and interactive elements. This Skill will help define the core principles and evaluate different state management or component architecture approaches.

Quick Start

Use the frontend-first-principles skill to analyze the proposed UI flow for the user profile page and provide a recommended implementation plan.

Frequently Asked Questions about frontend-first-principles

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

FAQPage Schema
How do I validate frontend feature plans before implementation?

Validate frontend feature plans by decomposing requirements and separating hard constraints from assumptions. This first-principles approach evaluates solution options against user intent, data sources, and rendering constraints to generate an implementation-ready plan with risk assessments.

What is first-principles thinking in UI flow planning?

First-principles thinking in UI flow planning extracts core user intent, data sources, and rendering constraints before writing code. It prevents costly rework by ensuring technical decisions for state management and component architecture are based on sound principles early.

How do I evaluate different state management approaches for a complex user dashboard?

Evaluate state management approaches for a complex dashboard by comparing solution directions based on simplicity, maintainability, accessibility, performance, and UX risk. This ensures the chosen component architecture handles multiple data sources effectively.

Can I use this planning approach for UI flow changes on an existing user profile page?

Yes, you can use this planning approach to analyze the proposed UI flow for an existing user profile page. It separates inherited patterns from actual constraints and provides a recommended implementation plan with concrete steps.

When should I not use first-principles analysis for frontend implementation?

You should avoid first-principles analysis for frontend implementation when changes are purely cosmetic and lack complex data sources or interactive elements, as the overhead of extracting core principles outweighs the benefit for simple updates.

What's the best way to separate hard constraints from assumptions in frontend architecture?

The best way to separate hard constraints from assumptions in frontend architecture is through requirement decomposition. This process evaluates solution options by identifying core user intent and rendering constraints, yielding a concrete implementation-ready plan.