ui-development

Generates implementation plans and design guidance for web interfaces and dashboards.

1|1|Updated Dec 28, 2025
One-click install
npx skills add https://github.com/ssimhan/meal-planner --skill ui-development
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-development
Source: https://github.com/ssimhan/meal-planner/tree/main/skills/ui-development
Command: npx skills add https://github.com/ssimhan/meal-planner --skill ui-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle with inconsistent UI patterns and fragmented design knowledge, leading to duplicated effort and slower delivery. This skill provides a structured approach to align design and implementation through design-system memory and actionable guidance.

Core Features & Use Cases

  • Audience-first UI guidance: defines personas, outcomes, and tokens to guide frontend work.
  • Design-system automation: yields reusable components, patterns, and tokens that cross projects.
  • Implementation planning: delivers step-by-step tasks, layout suggestions, and review criteria for dashboards, admin panels, and marketing pages.
  • Collaboration enablement: translates briefs into actionable briefs for designers and developers.

Quick Start

To start, provide a project brief or request a tailored UI plan, and the skill will return a ready-to-use implementation plan and pattern extraction.

Frequently Asked Questions about ui-development

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

FAQPage Schema
How do I create reusable design tokens and UI patterns for a web interface?

To create reusable design tokens and UI patterns, you need an implementation plan that extracts frontend patterns and standardizes design tokens. This approach aligns audience outcomes with concrete development tasks.

What is the best way to plan dashboard UI development step-by-step?

The best way to plan dashboard UI development is to generate a structured implementation workflow that includes layout suggestions, design rationale, and review criteria. This delivers actionable tasks for building admin panels.

How do I align frontend development with a design system to stop duplicating effort?

To align frontend development with a design system, you apply design-system memory to guide your work. This yields reusable components and fragmented design knowledge is consolidated into actionable briefs.

Can I generate an actionable UI brief from a project description for marketing pages?

Yes, you can generate an actionable UI brief by providing a project description. The system translates the brief into audience-first UI guidance, defining personas and outcomes for marketing sites.

Does this UI development approach work without existing frontend frameworks?

Yes, this UI development approach works without existing frontend frameworks because it focuses on generating implementation plans and design guidance. It provides step-by-step tasks independently.

What are the limitations of using audience-aligned design for web interfaces?

A limitation of audience-aligned design is that it relies on a clearly defined project brief to function effectively. Without an initial brief, the system cannot generate tailored implementation plans.