skills.rest
Innei
InneiCOMMUNITY
Explore all skills by this author →
Website𝕏@__oQueryGitHub

demo-ui-direction

Define UI design standards and component conventions for demo site interfaces.

32|5|Updated Mar 7, 2026
Search Tags:#visual consistency#style guide#ui design#layout patterns#component standards
One-click install
npx skills add https://github.com/Innei/haklex --skill demo-ui-direction
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: demo-ui-direction
Source: https://github.com/Innei/haklex/tree/main/.claude/skills/demo-ui-direction
Command: npx skills add https://github.com/Innei/haklex --skill demo-ui-direction

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It provides clear guidance on the visual style, layout, and component conventions necessary for consistent UI development on the haklex demo site.

Core Features & Use Cases

  • Design Consistency: Establishes a monochrome color palette, typography, spacing, and component patterns.
  • Guidelines for Layout: Defines header, navigation, content area, and page-specific layout conventions.
  • Use Case: UI developers implement new pages or components following these specifications to ensure visual harmony and adherence to the overall design system.

Quick Start

Refer to this skill when creating new demo pages or components to ensure style consistency and layout precision.

Frequently Asked Questions about demo-ui-direction

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

FAQPage Schema
How do I maintain visual consistency across UI components on a demo site?▼

To maintain visual consistency, this skill provides UI design standards defining a monochrome color palette, typography, and component conventions for harmonious demo site development.

What are the standard layout patterns for building a demo site interface?▼

Standard layout patterns for a demo site interface define specific conventions for headers, navigation, and content areas to ensure layout precision and visual harmony across pages.

How do I standardize typography and spacing for new UI components?▼

You can standardize typography and spacing by referencing the provided style guide, which establishes specific monochrome palettes and spacing rules for creating new interface components.

Do I need any external dependencies to apply these component standards?▼

No external dependencies are required to apply these component standards, as the skill operates independently to provide visual style references for interface development.

Can I use these UI design standards for platforms other than the haklex demo site?▼

These UI design standards are specifically tailored for the haklex demo site context, defining layout and visual style conventions optimized for that particular development environment.

When should I reference UI design standards during page development?▼

You should reference UI design standards when creating new demo pages or components to ensure style consistency and layout precision from the beginning of the development process.

Related Skills

Explore More Design & Creative Skills→
HarshodaiHarshodai

impeccable

Design and iterate frontend interfaces with UX, accessibility, and visual hierarchy standards.

Community
Advanced
emliunixemliunix

frontend-design

Create production-grade frontend interfaces with typography, color, motion, and responsive layout.

Community
Advanced
ChildoftheVibeChildoftheVibe

minimalist-ui

Generate CSS tokens and layout rules for minimalist bento-grid UI systems.

Community
Advanced
wzyxdwllwzyxdwll
14

extract

Identify reusable UI patterns and design tokens for consolidation into a centralized design system.

Community
Intermediate