skills.rest
dimitri-vs
dimitri-vsCOMMUNITY
Explore all skills by this author →
GitHub

interface-design

Create per-project interface design docs for dashboard and admin UI consistency.

1|Updated Feb 11, 2026
Search Tags:#design systems#dashboard#component library#design audit#ui design#visual QA#front-end consistency
One-click install
npx skills add https://github.com/dimitri-vs/elevate-agent-skills --skill interface-design-dimitri-vs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/dimitri-vs/elevate-agent-skills/tree/main/interface-design
Command: npx skills add https://github.com/dimitri-vs/elevate-agent-skills --skill interface-design-dimitri-vs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent dashboards, admin panels, and data-heavy pages across a codebase slow development and create a fragmented user experience, because teams repeat design decisions differently in every session.

Core Features & Use Cases

  • Creates a per-project interface design doc that captures component-library choices and UI conventions, so future work stays consistent.
  • Guides design decisions around component libraries (Skeleton/shadcn/ui/etc.) with a thin customization layer for palette, density, edges, depth, and typography.
  • Supports rigorous design audits for components, views/pages, or full apps by checking layout, data patterns, customization consistency, and state coverage against the doc.
  • Establishes a visual iteration loop using Playwright screenshots and reviewer scoring, focusing on aesthetics without changing locked client copy.

Quick Start

Ask an AI coding agent to build interface-design.md for your project by running the interactive setup questions, then use the result to guide new pages and audits going forward.

Frequently Asked Questions about interface-design

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

FAQPage Schema
How do I keep dashboard UI design consistent across a growing codebase?▼

Dashboard UI design consistency is maintained by centralizing component-library and styling decisions into a single per-project design doc. This document captures palette, density, edges, depth, and typography rules so future development stays standardized.

How do you perform a design audit for an admin panel?▼

A design audit for an admin panel checks layout, data patterns, customization consistency, and state coverage against a project design doc. It can be scoped to individual components, views, or the full app to enforce visual QA.

Can I use this to standardize a component library like shadcn/ui or Skeleton?▼

Yes, it guides design decisions around component libraries like shadcn/ui or Skeleton by applying a thin customization layer. This layer standardizes palette, density, edges, depth, and typography without heavily modifying the base library.

What is the best way to document UI conventions for data-heavy pages?▼

The best way to document UI conventions is generating an interface design doc through an interactive setup process. It produces documentation-driven requirements for layout patterns, data-view states, and audit checklists.

How do I create a visual iteration loop for front-end consistency?▼

A visual iteration loop for front-end consistency is created using Playwright screenshots and reviewer scoring. This process focuses on evaluating aesthetics and visual QA without altering locked client copy.

Do I need an existing design system to standardize utilitarian UI?▼

No, you do not need an existing design system. The process creates a per-project interface design doc from scratch by answering interactive setup questions, establishing the foundation for all future UI work.

Related Skills

Explore More Design & Creative Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
ChegginCheggin
1

visual-qa-pipeline

Capture Playwright screenshots of every page and report design evaluation results to Slack.

Community
Advanced
VitorRibeiro45VitorRibeiro45

design-guide

Centralizes UI design rules, tokens, typography, and component conventions for Paperclip's frontend.

Community
Advanced
shuyu-labsshuyu-labs
288

web-artifacts-builder

Bundle React and TypeScript projects into a single HTML artifact.

Official
Advanced