skills.rest
QuestionPilot
QuestionPilotCOMMUNITY
Explore all skills by this author →
GitHub

frontend-taste

Consolidate design guidelines and run commands to build and evaluate UI components.

Updated Jun 8, 2026
Search Tags:#design system#UI development#frontend design#UI refinement#contextual design
One-click install
npx skills add https://github.com/QuestionPilot/authored-skills --skill frontend-taste-questionpilot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-taste
Source: https://github.com/QuestionPilot/authored-skills/tree/main/skills/frontend-taste
Command: npx skills add https://github.com/QuestionPilot/authored-skills --skill frontend-taste-questionpilot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive framework for designing, iterating, and refining frontend interfaces, helping users create production-grade UIs that are both functional and visually appealing.

Core Features & Use Cases

  • Design System Integration: Incorporates design system elements and typography guidelines to ensure consistency and brand alignment.
  • Contextual Loading: Allows loading of context files (PRODUCT.md and DESIGN.md) to maintain design coherence.
  • Command-Based Workflow: Offers various commands like craft, shape, teach, document, and extract to guide the design process.
  • Evaluation Tools: Provides tools for critique, audit, and polishing UIs, ensuring quality and accessibility.
  • Use Case: Imagine you are designing a new landing page for a software product. Use this Skill to define the context, craft the design, extract components, and critically evaluate the final outcome.

Quick Start

Load the context files and initiate the design process by running the 'craft' command followed by the target feature name, such as 'craft homepage'.

Frequently Asked Questions about frontend-taste

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

FAQPage Schema
How do I build and refine frontend interfaces with a design system?▼

To build and refine frontend interfaces with a design system, load context files like PRODUCT.md and DESIGN.md, then use commands such as 'craft' to iterate UI components and ensure cohesive, accessible design.

What is the best way to evaluate UI components for accessibility and visual coherence?▼

Evaluating UI components for accessibility and visual coherence involves using built-in critique and audit tools to review the interface against system-level guidelines, ensuring the final output meets production-grade quality standards.

How do I extract and document UI components during frontend development?▼

You can extract and document UI components during frontend development by utilizing command-based workflows like 'extract' and 'document', which isolate elements from your crafted design and generate corresponding guidelines.

Do I need Node.js to use this frontend design workflow?▼

Yes, Node.js is a required dependency to run this frontend design workflow, as the Skill relies on Node.js to execute its scripts and load necessary design context files.

How does contextual loading maintain design coherence across frontend features?▼

Contextual loading maintains design coherence across frontend features by ingesting project-specific files like PRODUCT.md and DESIGN.md, which feed system-level guidelines directly into the UI crafting process.

Can I integrate existing typography guidelines into my UI development process?▼

Yes, you can integrate existing typography guidelines into your UI development process because the framework incorporates design system elements to ensure brand alignment and consistency throughout the interface.

Related Skills

Explore More Design & Creative Skills→
howdeployhowdeploy
15

design-consultation

Generate a DESIGN.md design system with typography, color, spacing, and motion guidelines.

Community
Advanced
thehivegroup-aithehivegroup-ai

impeccable-commands

Automate frontend UI design and critique workflows with command sequences.

Official
Advanced
juanelojgajuanelojga

normalize

Align feature designs to design-system tokens, components, and patterns.

Community
Advanced
ai-sapira-pocai-sapira-poc

critique

Critique frontend interfaces for visual hierarchy, information architecture, and emotional resonance.

Official
Advanced