skills.rest
BoomerAng9
BoomerAng9COMMUNITY
Explore all skills by this author →
GitHub

aims-ui-archetypes

Map active Next.js screens to A.I.M.S. archetypes and enforce design rules.

1|Updated Feb 2, 2026
Search Tags:#consistency#frontend#archetypes#ui-design#design-system#aims
One-click install
npx skills add https://github.com/BoomerAng9/AIMS --skill aims-ui-archetypes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aims-ui-archetypes
Source: https://github.com/BoomerAng9/AIMS/tree/main/.claude/skills/aims-ui-archetypes
Command: npx skills add https://github.com/BoomerAng9/AIMS --skill aims-ui-archetypes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A.I.M.S UI archetypes provide a unified set of design templates and detection logic to ensure every screen follows a cohesive, professional look and behavior across the platform.

Core Features & Use Cases

  • Automatically detects the current screen context (landing, auth, chat, CRM, command center, finance, workflows, or content tools) and applies the appropriate UI archetype.
  • Enforces global design rules (layout, typography, spacing) to maintain a consistent A.I.M.S. brand experience.
  • Provides a clear path to adapt existing screens to a standardized design system with minimal manual refactoring.
  • Example: When editing app/page.tsx for a landing page, the skill applies Landing archetype patterns and aligns with the design spec.

Quick Start

Classify the active screen path and apply the corresponding A.I.M.S. archetype while enforcing global design rules.

Frequently Asked Questions about aims-ui-archetypes

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

FAQPage Schema
How do I standardize UI design across multiple Next.js frontend screens?▼

UI archetype templates automate standardization by mapping active Next.js screens like landing, auth, chat, and CRM to predefined layouts. This enforces global design rules for layout, typography, and spacing to ensure a cohesive brand experience.

What are UI archetypes and how do they enforce design system consistency?▼

UI archetypes are unified design templates that detect the current screen context, such as landing or command center, and apply specific layout patterns. They validate consistency across views by enforcing global design rules for typography and spacing.

How do I apply a landing page archetype to app/page.tsx in a Next.js project?▼

Classify the active screen path to apply the corresponding A.I.M.S. archetype to app/page.tsx. This automatically aligns the file with the landing page design spec while enforcing global rules for minimal manual refactoring.

Can I use archetype templates to standardize auth and CRM screens in Next.js?▼

Yes, archetype templates support standardizing auth, CRM, chat, finance, and command center screens in Next.js. They detect the screen context and apply the appropriate UI archetype to maintain platform-wide UI consistency.

Do I need to manually refactor existing screens to adapt them to a new design system?▼

No, extensive manual refactoring is unnecessary. The archetype templates provide a clear path to adapt existing screens to a standardized design system with minimal manual refactoring required.

What limitations exist when enforcing global design rules across different frontend views?▼

A limitation is that enforcing global design rules targets specific Next.js frontend contexts like landing, auth, chat, CRM, and command center. Screens outside these predefined archetypes may lack standardized validation.

Related Skills

Explore More Design & Creative Skills→
jota-batutajota-batuta

performance-testing

Establish performance baselines and budgets for APIs and web applications.

Community
Advanced
LschulzesLschulzes

web-design-guidelines

Evaluate UI code against Web Interface Guidelines to detect deviations.

Community
Intermediate
xianmingyaoxianmingyao
1

frontend-design-pro

Enforce typography, color, spacing, and motion rules in frontend UI outputs.

Community
Intermediate
Maccio-huangMaccio-huang

html-ppt-zhangzara-neo-grid-bold

Generate HTML presentation decks with a neon yellow design system.

Community
Intermediate