skills.rest
yasim-doner
yasim-donerCOMMUNITY
Explore all skills by this author →
GitHub

impeccable

Coordinate frontend UI design workflows with DESIGN.md and product tokens.

Updated Jun 15, 2026
Search Tags:#design#ui#accessibility#frontend#tokens#ux#design-system
One-click install
npx skills add https://github.com/yasim-doner/vizyon --skill impeccable-yasim-doner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: impeccable
Source: https://github.com/yasim-doner/vizyon/tree/main/.gemini/skills/impeccable
Command: npx skills add https://github.com/yasim-doner/vizyon --skill impeccable-yasim-doner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Designs and aligns frontend interfaces with production-grade UX standards by guiding shape, palette, and documentation workflow across real apps, dashboards, and components.

Core Features & Use Cases

  • Provide a structured design process for shaping, critique, auditing, and polishing frontend UIs.
  • Align to design-system tokens, typography, color, spacing, and accessibility; produce DESIGN.md and DESIGN tokens.
  • Support end-to-end workflows (shape, craft, audit, polish, colorize, typeset, layout) with production-quality outputs and in-browser iteration.

Quick Start

Run node .gemini/skills/impeccable/scripts/context.mjs to load the project context, then follow the guided next steps.

Frequently Asked Questions about impeccable

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

FAQPage Schema
How do I structure a frontend UI design workflow for production-grade apps?▼

A production-grade frontend UI workflow integrates shaping, visual direction, codeCraft, auditing, and polish steps. It enforces design documentation and token alignment to deliver repeatable, on-brand interfaces for websites and dashboards.

What is the best way to align frontend components with design-system tokens?▼

Aligning frontend components with design-system tokens requires enforcing brand alignment and generating documentation like DESIGN.md. This ensures typography, color, and spacing remain consistent across product shells and components.

How do I audit frontend accessibility and UX standards in a UI project?▼

Auditing frontend accessibility and UX involves a structured critique process within the UI workflow. It checks color, spacing, and typography against production standards to ensure compliance and polish before release.

Do I need design documentation before building frontend product shells?▼

Yes, building frontend product shells requires PRODUCT.md and DESIGN.md files. These establish a registered design direction and ensure the UI aligns with the product's brand and design tokens before implementation begins.

What is the best way to coordinate typography and color in a frontend design system?▼

Coordinating typography and color in a frontend design system involves typeset and colorize workflow steps. These steps enforce token alignment and visual direction to produce cohesive, accessible UI components.

Related Skills

Explore More Design & Creative Skills→
jicaiincjicaiinc
74

brand-voice-analyzer

Extract a brand's voice characteristics from sample content into a structured profile.

Official
Intermediate
DeliciousHouseDeliciousHouse
2

frontend-design

Design and implement React components, web layouts, dashboards, and landing pages.

Community
Advanced
BozhidarN7BozhidarN7

web-design-guidelines

Review web UI code against current Vercel interface guidelines and accessibility standards.

Community
Intermediate
shirulotshirulot

ui-ux-polish

Iteratively refine web application UI/UX for desktop and mobile accessibility.

Community
Advanced