skills.rest
KunjMaheshwari
KunjMaheshwariCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-and-technical-skills

Document UI/UX and frontend architecture patterns in Markdown with YAML frontmatter.

1|Updated Feb 27, 2026
Search Tags:#typescript#design#architecture#frontend#react#uiux
One-click install
npx skills add https://github.com/KunjMaheshwari/Legacy-Code-Migration-to-UI-Application --skill design-and-technical-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-and-technical-skills
Source: https://github.com/KunjMaheshwari/Legacy-Code-Migration-to-UI-Application/tree/main
Command: npx skills add https://github.com/KunjMaheshwari/Legacy-Code-Migration-to-UI-Application --skill design-and-technical-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill captures and communicates the combined UI/UX design knowledge and frontend engineering practices in a structured, reusable format for faster onboarding and consistent development.

Core Features & Use Cases

  • UI/UX design guidance and established frontend architecture patterns to guide teams.
  • Documentation of decisions, rationale, and best practices for maintainable codebases.
  • Use Case: A design/engineering team quickly references the catalog to align UI decisions with implementation details during a project.

Quick Start

Review the Skill.md to understand demonstrated UI/UX and frontend architecture practices, and apply these patterns to your own project.

Frequently Asked Questions about design-and-technical-skills

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

FAQPage Schema
How do I document UI/UX design principles and frontend architecture patterns for team onboarding?▼

Documenting UI/UX design principles and frontend architecture patterns involves codifying decisions, rationale, and best practices into a structured Markdown format. This captures combined knowledge to ensure faster team onboarding and consistent frontend development across projects.

What is the best way to align UI/UX decisions with frontend engineering implementation details?▼

Aligning UI/UX decisions with frontend engineering implementation requires a shared reference catalog of established practices. Teams reference this catalog during design handoffs and code reviews to ensure React and TypeScript implementation matches UI expectations.

How does codifying frontend architecture patterns help maintainable codebases?▼

Codifying frontend architecture patterns helps maintainable codebases by documenting decisions and rationale in a reusable format. This establishes clear best practices for UI/UX and engineering teams, reducing ambiguity during development and code reviews.

Can I use these UI/UX and frontend engineering practices for React and TypeScript projects?▼

Yes, these UI/UX and frontend engineering practices apply directly to React and TypeScript projects. The cataloged architecture patterns and design principles guide development teams in building maintainable user interfaces with established technical stacks.

What format does this UI/UX and frontend architecture documentation use?▼

The UI/UX and frontend architecture documentation uses a structured format with YAML frontmatter for metadata and a Markdown body. The Markdown body describes the problem solved, core features, and quick-start usage for easy integration.

When do I need a structured reference catalog for UI/UX design and frontend engineering?▼

You need a structured reference catalog for UI/UX design and frontend engineering when onboarding new team members, conducting code reviews, or managing project handoffs. It ensures consistent alignment between design decisions and implementation details.

Related Skills

Explore More Design & Creative Skills→
eleva-labseleva-labs

setup-env

Configure environment variables and .env files for frontend environments.

Official
Basic
range-etrange-et

distill

Distill UI concepts to essential elements across architecture, visuals, layout, and copy.

Community
Intermediate
JongsixJongsix

moai-docs-generation

Generate technical documentation from source code and API definitions.

Community
Advanced
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic