원클릭으로 Manus에서 모든 스킬 실행

ui-ux

스타4

포크0

업데이트2026년 5월 25일 03:55

UI/UX design skill for building polished, accessible, production-grade interfaces. Covers layout, typography, color systems, motion design, responsive design, dark mode, glassmorphism, component styling, and visual polish. Uses taste sliders and audit-first methodology to prevent generic output. Activate on "design this UI", "make it look good", "improve the design", "frontend polish", "responsive layout", "add animations", "design system", "visual overhaul", or any UI/frontend design task.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

InNoobWeTrust

InNoobWeTrust/dotfiles

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

UI-UX Design Skill

A design companion for creating polished, accessible interfaces using "High-Agency" principles.

High-Agency Principles

Beyond basic design, follow these rules to ensure premium, production-ready output:

1. Taste Sliders (1-10)

Establish the "creative budget" using these three sliders. AI should interpret them as follows:

DESIGN_VARIANCE:
- 1-3: Standard layouts (centered, F-pattern), system fonts, predictable grids.
- 8-10: Asymmetric layouts, boutique typography, experimental overlapping elements.
MOTION_INTENSITY:
- 1-3: Discrete 200ms transitions, subtle hover scale (1.02x).
- 8-10: Scroll-linked parallax, magnetic cursors, 3D CSS transforms (Apple-style).
VISUAL_DENSITY:
- 1-3: High whitespace (luxury), large type, 1-2 elements per viewport.
- 8-10: Compact data grids, multi-pane dashboards, high information-to-ink ratio.

2. Audit-First Redesign

Before rewriting code, perform a brief audit:

Audit: Identify visual issues (generic colors, poor spacing, bad typography).
Prioritize: Rank fixes by visual impact.
Modernize: Replace outdated patterns (heavy borders, standard shadows) with modern alternatives (subtle depth, glassmorphism).

3. Output Policy (Anti-Lazy)

ABSOLUTE BANS:

Never use placeholders like // ... rest of code or /* implementation here */.
Never skip code blocks.
MANDATE: Deliver the full, production-ready file for every request.
EXCEPTION: For files exceeding 1000 lines, provide a targeted "Surgical Update" using replace tools, but ensure all logic within the edited scope is complete.

Core Principles

Visual Hierarchy & Typography

Hierarchy: Guide the eye using size, weight, color, and spacing.
Typography: Prefer modern sans-serif/serif (Inter, Geist, Playfair) over system defaults.
Line Length: 60-75 characters for optimal readability.

Spacing & Layout (4px Grid)

Scale: Use a base-4 grid (4, 8, 12, 16, 24, 32, 48, 64, 96).
Grouping: Group related elements tightly; separate unrelated sections with generous whitespace.

Color & Accessibility

60-30-10 Rule: 60% neutral, 30% secondary, 10% accent.
Accessibility: Minimum WCAG AA (4.5:1 contrast). Color must not be the only indicator.

Data Augmentation

This skill uses curated design data (palettes, component specs) synced as raw CSV files from external repositories.

Cache Location

UI_UX_CACHE or ~/.cache/ui-ux-skill/ui-ux-pro-max/

Querying CSV Data

Since CSVs are stored as-is (not converted to JSON), use these tools:

With csvkit:

# Find palettes containing a specific color hex
csvgrep -c color -m "#3B82F6" ~/.cache/ui-ux-skill/ui-ux-pro-max/*.csv

# Search component specs
csvsql --query "SELECT * FROM components WHERE type='button'" ~/.cache/ui-ux-skill/ui-ux-pro-max/components.csv

With ripgrep (fast text search):

# Find rows containing a keyword
rg "glassmorphism" ~/.cache/ui-ux-skill/ui-ux-pro-max/

# Search specific columns
rg -N "backdrop-filter" ~/.cache/ui-ux-skill/ui-ux-pro-max/

Sync Command

../../scripts/sync-remotes.sh --apply

Aesthetic Patterns (Examples)

These patterns demonstrate high variance/motion combinations:

3D Scroll (Apple-style): Interactive motion driven by scroll progress.
Premium Minimalist (Linear/Notion): Monochrome palettes, 1px borders, high-quality whitespace.
Modern Brutalist: Bold Swiss typography, stark contrast, raw mechanical components.
Glassmorphism: Frosted glass effect using backdrop-filter: blur(20px).

Rules

No Truncation: Deliver full files only (see Output Policy for exceptions).
Accessibility First: WCAG AA is the absolute baseline.
Context-Aware: Respect existing tech stack (Tailwind vs Vanilla CSS).
Audit Before Action: Briefly state design rationale before making changes.

이 저장소의 다른 Skills

같은 저장소

codebase-exploration

InNoobWeTrust/dotfiles

Navigate and map large unfamiliar codebases. Find where behavior lives, trace feature flow and call chains, map architecture and dependency graphs, plan migrations/refactors, or answer "where is X" and "how does this work" questions. Also use for codebase scouting, hunting for specific patterns, discovering module relationships, or code archaeology. Activate on "find the code for", "how is X implemented", "navigate the codebase", "trace this", "map the architecture", or any task in an unfamiliar repo.

2026-07-154

memory

InNoobWeTrust/dotfiles

Human-inspired working + consolidated memory for agents, and the same progressive-disclosure pattern applied to docs and code. Two-tier store: unbounded short-term notes (working memory, per-branch session state, scratchpads) and size-limited long-term memory (curated facts, decisions, constraints, corrections) reached through an INDEX. A dream cycle runs on explicit request or git commit to consolidate hot short-term entries into long-term, score existing long-term entries, and propose evictions for human approval. Session checkpoints are one kind of short-term memory entry. Trigger phrases: 'remember this', 'save memory', 'checkpoint', 'save handoff', 'save context', 'what was I working on', 'resume', 'restore', 'load context', 'consolidate memory', 'dream cycle', 'prune memory', 'forget', 'evict', 'index my notes', 'structure docs', 'shard doc', 'split module', 'progressive disclosure'.

2026-07-154

multi-perspective-deliberation

InNoobWeTrust/dotfiles

Coordinate a multi-persona deliberation session to challenge assumptions, debate architectural decisions, and perform pre-mortems. Leverages concurrent delegated agents/workers when the environment supports them, or falls back to single-context simulated dialogue. Trigger phrases: 'party mode', 'deliberation', 'multi-perspective', 'get a second opinion', 'debate this', 'challenge design'.

2026-07-154

project-foundation

InNoobWeTrust/dotfiles

Bootstrap, audit, evolve, and materialize the AI-augmented project foundation (AGENTS.md, GLOSSARY.md, .agents/rules+skills core pack, Makefile, architecture, quality gates). Load for new project setup, missing skills after bootstrap, foundation drift, sync .agents from global, evolve AGENTS/GLOSSARY/architecture to match the repo, or audit project foundation. Skip only when editing a single existing rule/skill body with no pack-level change.

2026-07-154

reviewer

InNoobWeTrust/dotfiles

Multi-lens review orchestrator for code, specs, architecture, config, docs, and infrastructure. Hybrid execution: direct technical review using sub-reviewer references, or delegate to independent agents/workers for multi-perspective, audit, or specialized reviews. Sub-lenses: code-quality, design-rigor, adversarial, security, edge-case, editorial. Activate on "review", "check", "audit", "challenge", "QA", or any explicit review request.

2026-07-154

subagent-dispatch

InNoobWeTrust/dotfiles

Construct a precise, structured delegation prompt before every delegated-agent or worker launch. Use whenever you are about to delegate work to a background agent, run a task in parallel, or spawn a worker. Injects scope constraints, a structured output contract, obstacle reporting, and allowed-action boundaries directly into the input prompt to compensate for generic or unconfigured delegated-worker descriptions. Activate on: 'delegate this', 'run this in parallel', 'use the research agent', 'background task', 'spawn a worker', 'launch a subagent', 'hand this off'.

2026-07-154

name

ui-ux

description

UI-UX Design Skill

A design companion for creating polished, accessible interfaces using "High-Agency" principles.

High-Agency Principles

Beyond basic design, follow these rules to ensure premium, production-ready output:

1. Taste Sliders (1-10)

Establish the "creative budget" using these three sliders. AI should interpret them as follows:

DESIGN_VARIANCE:
- 1-3: Standard layouts (centered, F-pattern), system fonts, predictable grids.
- 8-10: Asymmetric layouts, boutique typography, experimental overlapping elements.
MOTION_INTENSITY:
- 1-3: Discrete 200ms transitions, subtle hover scale (1.02x).
- 8-10: Scroll-linked parallax, magnetic cursors, 3D CSS transforms (Apple-style).
VISUAL_DENSITY:
- 1-3: High whitespace (luxury), large type, 1-2 elements per viewport.
- 8-10: Compact data grids, multi-pane dashboards, high information-to-ink ratio.

2. Audit-First Redesign

Before rewriting code, perform a brief audit:

Audit: Identify visual issues (generic colors, poor spacing, bad typography).
Prioritize: Rank fixes by visual impact.
Modernize: Replace outdated patterns (heavy borders, standard shadows) with modern alternatives (subtle depth, glassmorphism).

3. Output Policy (Anti-Lazy)

ABSOLUTE BANS:

Never use placeholders like // ... rest of code or /* implementation here */.
Never skip code blocks.
MANDATE: Deliver the full, production-ready file for every request.
EXCEPTION: For files exceeding 1000 lines, provide a targeted "Surgical Update" using replace tools, but ensure all logic within the edited scope is complete.

Core Principles

Visual Hierarchy & Typography

Hierarchy: Guide the eye using size, weight, color, and spacing.
Typography: Prefer modern sans-serif/serif (Inter, Geist, Playfair) over system defaults.
Line Length: 60-75 characters for optimal readability.

Spacing & Layout (4px Grid)

Scale: Use a base-4 grid (4, 8, 12, 16, 24, 32, 48, 64, 96).
Grouping: Group related elements tightly; separate unrelated sections with generous whitespace.

Color & Accessibility

60-30-10 Rule: 60% neutral, 30% secondary, 10% accent.
Accessibility: Minimum WCAG AA (4.5:1 contrast). Color must not be the only indicator.

Data Augmentation

This skill uses curated design data (palettes, component specs) synced as raw CSV files from external repositories.

Cache Location

UI_UX_CACHE or ~/.cache/ui-ux-skill/ui-ux-pro-max/

Querying CSV Data

Since CSVs are stored as-is (not converted to JSON), use these tools:

With csvkit:

# Find palettes containing a specific color hex
csvgrep -c color -m "#3B82F6" ~/.cache/ui-ux-skill/ui-ux-pro-max/*.csv

# Search component specs
csvsql --query "SELECT * FROM components WHERE type='button'" ~/.cache/ui-ux-skill/ui-ux-pro-max/components.csv

With ripgrep (fast text search):

# Find rows containing a keyword
rg "glassmorphism" ~/.cache/ui-ux-skill/ui-ux-pro-max/

# Search specific columns
rg -N "backdrop-filter" ~/.cache/ui-ux-skill/ui-ux-pro-max/

Sync Command

../../scripts/sync-remotes.sh --apply

Aesthetic Patterns (Examples)

These patterns demonstrate high variance/motion combinations:

3D Scroll (Apple-style): Interactive motion driven by scroll progress.
Premium Minimalist (Linear/Notion): Monochrome palettes, 1px borders, high-quality whitespace.
Modern Brutalist: Bold Swiss typography, stark contrast, raw mechanical components.
Glassmorphism: Frosted glass effect using backdrop-filter: blur(20px).

Rules

No Truncation: Deliver full files only (see Output Policy for exceptions).
Accessibility First: WCAG AA is the absolute baseline.
Context-Aware: Respect existing tech stack (Tailwind vs Vanilla CSS).
Audit Before Action: Briefly state design rationale before making changes.