메뉴
Design and improve UI/UX for the application. Use when asked to design interfaces, improve visual design, fix styling issues, ensure consistency, or enhance user experience. Applies design best practices for colors, typography, spacing, and interactions.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | designer |
| description | Design and improve UI/UX for the application. Use when asked to design interfaces, improve visual design, fix styling issues, ensure consistency, or enhance user experience. Applies design best practices for colors, typography, spacing, and interactions. |
| allowed-tools | Read, Grep, Glob, Edit, Write |
Create and maintain exceptional UI/UX for the personal_assistant (Cimplur) project, ensuring visual consistency, accessibility, and delightful user experiences.
The full style guide lives at docs/FRONTEND_STYLE_GUIDE.md. Always read that file before making design decisions. Key highlights below for quick reference.
#56c596All primary UI elements (buttons, links, active states, logo) use this color. It is applied via Bootstrap's $primary Sass variable override.
| Token | Hex | Usage |
|---|---|---|
--fyli-primary | #56c596 | Primary actions, links, logo |
--fyli-primary-hover | #45a67e | Hover/active states |
--fyli-primary-light | #e8f7f0 | Tinted backgrounds |
--fyli-primary-dark | #3b8a69 | High-emphasis text |
| Role | Hex |
|---|---|
| Success | #198754 |
| Danger | #dc3545 |
| Warning | #ffc107 |
| Info | #0dcaf0 |
var(--fyli-*).main.css is the only global stylesheet besides framework imports.docs/FRONTEND_STYLE_GUIDE.md for the full palette, typography, spacing, component patterns, and accessibility requirements.Primary CTA: Use btn btn-primary (renders in #56c596).
Secondary CTA: Use btn btn-outline-secondary.
Destructive CTA: Use btn btn-outline-danger.
Always implement these states:
Use Bootstrap form-control class. Focus ring color inherits from $primary (#56c596).
.card {
background: var(--bg-primary);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
padding: var(--spacing-xl);
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
Success:
background: #d1fae5;
border: 1px solid #6ee7b7;
color: #065f46;
Error:
background: #fef2f2;
border: 1px solid #fecaca;
color: #ef4444;
Warning:
background: #fef3c7;
border: 1px solid #f59e0b;
color: #92400e;
Info:
background: #dbeafe;
border: 1px solid #93c5fd;
color: #1e40af;
.badge {
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
}
.badge-success { background: #d1fae5; color: #065f46; }
.badge-error { background: #fef2f2; color: #ef4444; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info { background: #dbeafe; color: #1e40af; }
/* Subtle lift */
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
/* Color transition */
transition: background-color var(--transition-fast);
transform: translateY(0);
/* or */
transform: scale(0.98);
Always provide visual feedback:
.spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
Always design empty states:
:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Mobile first approach */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
Before implementing any design:
<div class="page">
<AppHeader />
<main class="main">
<div class="container">
<div class="page-header">
<h1 class="page-title">Title</h1>
<p class="page-subtitle">Description</p>
</div>
<!-- Content -->
</div>
</main>
<AppFooter />
</div>
<div class="content-card">
<div class="card-header">
<h2>Section Title</h2>
</div>
<div class="card-body">
<!-- Content -->
</div>
</div>
Use btn-primary or a card with background: var(--fyli-primary); color: white; for emphasis cards.
When reviewing or creating designs, provide:
Explain the reasoning behind visual choices
Identify any deviations from the design system
Flag any accessibility issues
Specific CSS/component changes with code examples
Evaluate if the most important elements stand out appropriately
Audit the codebase for dead code, duplicate code, inefficient code, overloaded code, missing test coverage, non-conforming code, stale documentation, and other best practice violations. Uses parallel subagents for discovery and hands off findings to /architect to create a TDD for fixes.
Review code for quality, standards compliance, and best practices. Use when asked to review code, check for issues, audit code quality, or validate implementations against project standards.
Design and plan software architecture for new features or refactoring. Use when asked to architect a solution, design a feature, create TDD, plan implementation, or make architectural decisions.
Implement code from a TDD (Technical Design Document). Use when asked to build a feature from a TDD, implement a design, or code from a specification. Follows the TDD precisely, implements in phases, and submits for code review.
Debug and fix broken code. Use when errors occur, tests fail, or the application isn't working as expected. Performs root cause analysis, implements fixes, adds regression tests, and documents the bug.
Commit and push changes across all repos in the monorepo. Detects which repos have changes, stages them, generates conventional commit messages, and pushes. Handles root repo and sub-repos (cimplur-core, fyli-fe-v2, fyli-html, fyli-infra) independently.