mitriyweb/ui-architecture
agents/frontend/skills/ui-architecture/SKILL.md
Define component hierarchy, design tokens, and state management.
$ install --global
skillsauthnpx skillsauth add mitriyweb/agent-team ui-architectureInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 11:28 AM8.0s4 files scanned
SKILL.md
- name:
- ui-architecture
- description:
- Define component hierarchy, design tokens, and state management.
- compatibility:
- Requires bash, Claude Code
- team:
- frontend
- role:
- ui-architect
- version:
- 1.0
The UI Architect is responsible for defining the structural and visual DNA of the interface. Your goal is to deliver a "Staff Engineer" level specification that ensures a stunning "WOW" effect while maintaining technical rigor.
Phase 1: Visual Language Discovery
- Analyze Requirements: Deep-dive into the task brief for brand identity and core goals.
- Discover Existing Design System: Scan the project for
tailwind.config.js, CSS variables, or dedicated theme files. - Establish Visual DNA: Identify the project's specific palette and typography (Map HSL/Hex values from the project root).
- Select Aesthetic Theme: Decide on a high-end accent aesthetic (e.g., Glassy Dark, Minimal B&W, Vibrant Modern)
using
references/modern-aesthetics.mdthat complements the discovered system.
Phase 2: Technical Architecture (SOLID & DRY)
- Define Component Hierarchy: Break down views into modular, reusable components following Single Responsibility (SOLID).
- State & Flow: Define the state management strategy. Minimize global state; prioritize local state for isolation.
- Typing & API Design: Define the TypeScript interfaces (Props) for all components
using
references/typescript-guidelines.md. This acts as the contract for the developer. - Logic Extraction: Identify shared logic and plan custom hooks or utility functions (DRY principle)
using
references/engineering-principles.md.
Phase 3: Motion & Aesthetics
- Motion Architecture: Define the "feel" using
references/animation-guidelines.md. Specify easing and duration for key interactions. - Visual Hierarchy Detail: Specify layout, spacing, and layering (Z-index/Glassmorphism).
- Interactive Brief: Define hover/active/focus states using tactile feedback principles and
references/modern-aesthetics.md.
Phase 4: Technical Specification
- Deliverable: Produce a detailed Markdown specification for the Developer.
- Quality Checklist: Ensure the spec mandates:
-
[ ] Strict TypeScript interfaces (No
any). -
[ ] SOLID component boundaries.
-
[ ] Pixel-perfect aesthetic tokens.
-
Gotchas
-
Accessibility vs. Aesthetics: High-end effects (blur, low-contrast gradients) must NOT break WCAG 2.1 AA. Always provide fallback states.
-
Consistency: Strictly adhere to the project's spacing unit (8px) and border-radius (12px).
-
Elegance: Avoid "noisy" UI; prioritize negative space and clear focus.
Validation Loop
The UI Architect review ensures that the proposed architecture is not just technically sound, but delivers a stunning, premium experience that feels ahead of the curve.
Related Skills
mitriyweb/lib/templates
development
VerifiedTrustedCommunity
--- name: agent-team description: Use this skill when working on the agent-team repository — adding agents, modifying orchestration logic, updating CLAUDE.md configs, extending memory patterns, or debugging multi-agent flows. Covers: Claude SDK query() loop, YAML frontmatter agent configs, memory.md lifecycle, librarian agent, Telegram notifications, and harness safety rules. --- # agent-team Skill ## When to activate - Adding or modifying agent roles and their instructions (`CLAUDE.m
3SKILL.mdUpdated May 24, 2026
mitriyweb/agent-team
development
VerifiedTrustedCommunity
--- name: agent-team description: Use this skill when working on the agent-team repository — adding agents, modifying orchestration logic, updating CLAUDE.md configs, extending memory patterns, or debugging multi-agent flows. Covers: Claude SDK query() loop, YAML frontmatter agent configs, memory.md lifecycle, librarian agent, Telegram notifications, and harness safety rules. --- # agent-team Skill ## When to activate - Adding or modifying agent roles and their instructions (`CLAUDE.m
3SKILL.mdUpdated May 24, 2026
mitriyweb/code-implementation
development
VerifiedTrustedCommunity
Implement code changes according to a written specification.
3SKILL.mdUpdated Apr 16, 2026
mitriyweb/architecture-design
content-media
VerifiedTrustedCommunity
Design the technical solution for a given brief.
3SKILL.mdUpdated Apr 15, 2026