skills.rest
79yuuki
79yuukiCOMMUNITY
Explore all skills by this author →
GitHub

component-gallery

Select reusable component patterns from design systems for frontend UI tasks.

1|Updated Mar 6, 2014
Search Tags:#accessibility#frontend#components#design systems#dashboard#ui design
One-click install
npx skills add https://github.com/79yuuki/dotfiles --skill component-gallery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-gallery
Source: https://github.com/79yuuki/dotfiles/tree/main/claude/skills/component-gallery
Command: npx skills add https://github.com/79yuuki/dotfiles --skill component-gallery

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps solve the challenge of designing consistent, effective UI structures by replacing vague interface ideas with proven component patterns and design-system guidance.

Core Features & Use Cases

  • Component Pattern Selection: Choose appropriate UI components such as cards, tables, forms, navigation, and content structures based on established design-system patterns.
  • Page Structure Guidance: Build layouts for landing pages, dashboards, catalogs, settings pages, and other common application screens using reusable component recipes.
  • UI Review Support: Analyze existing interfaces for missing patterns, accessibility concerns, responsive issues, and component selection improvements.

Quick Start

Ask the component-gallery skill to design a dashboard page structure using recommended component patterns and review considerations.

Frequently Asked Questions about component-gallery

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

FAQPage Schema
How do I design a dashboard layout using established UI component patterns?▼

To design a dashboard layout using UI component patterns, you select reusable structures like cards, tables, and navigation from established design systems. This process yields structured implementation guidance for AI coding workflows.

What are the best ways to structure frontend page architecture for design systems?▼

Structuring frontend page architecture involves applying reusable component recipes for landing pages, dashboards, and settings pages. This approach replaces vague interface ideas with proven design-system patterns to ensure consistent UI structures.

Can I use component gallery patterns to review existing interfaces for accessibility?▼

Yes, you can review existing interfaces for accessibility by analyzing them against established component patterns. This process identifies missing patterns, responsive issues, and component selection improvements within your current UI design.

Do I need a specific design framework to plan frontend component taxonomy?▼

No specific design framework is required to plan frontend component taxonomy, but the process relies on component taxonomy references and page recipes. These inputs help produce structured implementation guidance for your AI coding workflows.

What limitations exist when applying reusable component recipes to frontend design tasks?▼

A limitation of applying reusable component recipes is that the output is structured implementation guidance rather than final code. The process requires integrating component taxonomy references to effectively specify UI patterns for AI coding workflows.

Related Skills

Explore More Design & Creative Skills→
GeargrindadminGeargrindadmin

eval-ui-ux

Evaluate UI/UX for design system adherence, visual consistency, and accessibility.

Community
Advanced
agony1997agony1997

spec-to-md

Convert specification documents into structured implementation guides and .md files.

Community
Advanced
microsoftmicrosoft
2.9k

frontend-design-review

Audit UI implementations for design-system compliance across typography, spacing, tokens, colors, and accessibility.

Official
Advanced
dawsonblockdawsonblock

frontend-design

Design and implement responsive UI interfaces for web applications using React and CSS frameworks.

Community
Advanced