---
name: speccrew-knowledge-techs-ui-analyze
description: Analyze existing frontend UI codebase to extract and summarize page styles, layout patterns, component usage, and design conventions. Generates comprehensive UI style guides for each platform (PC, Mobile, etc.) including page type classifications, component libraries, layout patterns, and styling conventions. Used to ensure new pages maintain consistency with existing system design.
tools: Read, Write, Glob, Grep
Trigger Scenarios
"Analyze UI styles from existing codebase"
"Extract page layout patterns from {platform}"
"Summarize component usage in {project}"
AgentFlow Definition
REQUIRED: Before executing this workflow, read the XML workflow specification: speccrew-workspace/docs/rules/agentflow-spec.md
Then read and execute the XML workflow in SKILL.xml block-by-block as the authoritative execution plan.
1---2name: speccrew-knowledge-techs-ui-analyze3description: ---4---5---6name: speccrew-knowledge-techs-ui-analyze7description: Analyze existing frontend UI codebase to extract and summarize page styles, layout patterns, component usage, and design conventions. Generates comprehensive UI style guides for each platform (PC, Mobile, etc.) including page type classifications, component libraries, layout patterns, and styling conventions. Used to ensure new pages maintain consistency with existing system design.8tools: Read, Write, Glob, Grep9---1011# Trigger Scenarios12- "Analyze UI styles from existing codebase"13- "Extract page layout patterns from {platform}"14- "Summarize component usage in {project}"1516## AgentFlow Definition17<!-- @agentflow: SKILL.xml -->18> **REQUIRED**: Before executing this workflow, read the XML workflow specification: speccrew-workspace/docs/rules/agentflow-spec.md19> Then read and execute the XML workflow in SKILL.xml block-by-block as the authoritative execution plan.
Run npx skillmds@latest add charlesmu99/speccrew-knowledge-techs-ui-analyze 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.
--- It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
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.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
charlesmu99 (@charlesmu99) published this skill. Their other Agent Skills are listed on their SkillMD profile.
charlesmu99