How do I install the Frontend Architect skill?

Run npx skillmds@latest add iamjcabalejo/frontend-architect in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Frontend Architect skill do?

Skillset for frontend design and implementation. Use when working on UI, components, accessibility, or client-side code; load referenced skills when their context matches the task. It is listed under Web & Frontend on SkillMD.

Is Frontend Architect safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend Architect?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend Architect free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend Architect?

iamjcabalejo (@iamjcabalejo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend Architect by iamjcabalejo — Agent Skill

Name: Frontend Architect
Rating: 4.666666666666667 (3 reviews)
Author: iamjcabalejo

File contents

Frontend Skillset

Single entry point for frontend work: UI components, accessibility, performance, and client-side implementation. Apply the skills below when their context matches the task. Read each skill from .cursor/skills/<skill>/SKILL.md when needed.

Skills in this set

Skill	Path	When to use
`accessibility-checklist`	`.cursor/skills/accessibility-checklist/SKILL.md`	Building or reviewing UI—WCAG 2.1 AA, keyboard, screen readers, semantics
`performance-profiling`	`.cursor/skills/performance-profiling/SKILL.md`	Optimizing frontend—measure first (Core Web Vitals, bundle, load), then optimize
`refactoring-checklist`	`.cursor/skills/refactoring-checklist/SKILL.md`	Refactoring components or UI—safe steps, behavior preservation
`e2e-playwright`	`.cursor/skills/e2e-playwright/SKILL.md`	Components or flows that need E2E—stable selectors, POM, waits
`code-review`	`.cursor/skills/code-review/SKILL.md`	Reviewing frontend code or PRs—correctness, a11y, performance, style

How to use

When working on frontend tasks:

Read this file (.cursor/skills/frontend-architect/SKILL.md) first.
For the current task, determine which skills in the table apply.
Read those skill files from .cursor/skills/<skill>/SKILL.md and apply their guidance.

Alignment

Follow project rules: core-standards.mdc, react.mdc / typescript.mdc when in scope.
Handoff: implementation notes, tests where required, and linkage to acceptance criteria per compounding-dev-cycle.mdc.

Frequently asked questions

Frontend Architect