Does it support specific frontend libraries?

While adaptable, it features deep integration for React-based stacks using TypeScript, Jotai for state management, and Vite for building.

What input does this skill require?

It works best with EARS (Easy Approach to Requirements Syntax) documentation, project context files, and existing architecture docs if available.

Can it help with performance and accessibility?

Yes, it includes specialized templates for defining performance optimization strategies and WCAG-compliant accessibility plans within the design document.

How does it handle architectural decisions?

It uses a decision framework to generate Architecture Decision Records (ADRs) that document the context, chosen solution, rationale, and alternatives considered.

What is the Design Architect skill?

It is a specialized Claude Code capability that automates the process of turning functional requirements into detailed technical architectures, diagrams, and specifications.

Design Architect

Name: Design Architect
Author: vincent-kk

byvincent-kk

•

Productivity & Workflow

Transforms EARS requirements into production-ready technical architectures, including component structures, state management, and API specifications.

The Design Architect skill bridges the gap between abstract requirements and concrete implementation by generating comprehensive technical designs tailored for the React and TypeScript ecosystem. It automates the creation of structured documentation for component hierarchies, atomic state management with Jotai, and robust API contracts. By generating Architecture Decision Records (ADRs) and traceability matrices, it ensures every technical choice is justified and every requirement is mapped to a specific design element, significantly reducing implementation risk and improving long-term maintainability.

Key Features

01Designs React component hierarchies with TypeScript interface definitions

02Generates Architecture Decision Records (ADR) with clear rationales and trade-offs

03Produces comprehensive API specifications including error handling and retry logic

04Creates atomic state management schemas using Jotai patterns

051 GitHub stars

06Converts EARS requirements into detailed technical specifications and data models

Use Cases

01Planning complex React feature architectures before starting the implementation phase

02Documenting technical decisions and rationale for team alignment and peer review

03Establishing bidirectional traceability between functional requirements and technical design

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vincent-kk/albatrion design-architect

For use in Claude.ai and ChatGPT

Download Skill