메뉴
Use when: ui ux, design system, figma handoff, wireframes, user flow, dashboard, landing page, angular frontend screen, component styling, responsive, accessibility, dark mode, visual consistency, SaaS B2B cloud
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Angular frontend project conventions. Use when generating or reviewing Angular code for signals, standalone components, strong typing, one-class-per-file, enums/constants, routing, services, and i18n.
Generate or extend a CQRS feature in InfraFlowSculptor. Use for aggregates, commands, queries, handlers, validators, repositories, contracts, and API endpoints with strong typing and one-type-per-file conventions.
C#/.NET project conventions. Use when generating or reviewing backend code for naming, XML docs, one-type-per-file, no magic strings, strong typing, and design-pattern selection.
Use when: corpus-level questions, documentation graph, architecture overview from docs+code, onboarding orientation, audit context, cross-file conceptual links, god nodes, community detection, surprising connections, diagram-to-code traceability, or any question that spans documentation and code rather than pure code structure.
Use when: model context protocol, MCP, MCP server, C# MCP, .NET MCP, VS Code mcp.json, local stdio MCP, remote HTTP MCP, deployed MCP endpoint, streamable HTTP, tools/resources/prompts, AI tool integration, create project from prompt, monorepo, split infra/code, clarification workflow, elicitation, IaC import, diagram-to-project, migration planning, or long-term MCP architecture for InfraFlowSculptor.
Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file.
| name | ui-ux-front-saas |
| description | Use when: ui ux, design system, figma handoff, wireframes, user flow, dashboard, landing page, angular frontend screen, component styling, responsive, accessibility, dark mode, visual consistency, SaaS B2B cloud |
Use this skill for frontend UI/UX work in InfraFlowSculptor.
This skill transforms product/design intent into implementable Angular UI decisions, while keeping consistency with the existing login page and product goals.
Before proposing any new UI direction, read and align with:
Extract and preserve the existing visual DNA:
Do not introduce random style shifts that clash with the login visual baseline.
Always design and implement with reusable tokens/components first.
Define and use tokens for:
Ensure reusable component coverage for:
Each component must define variants and states (hover, focus, disabled, error, loading).
No gratuitous visual effects. Function clarity comes first.
When the task is design-heavy (Figma, screen architecture, UX specs), produce:
Also provide:
When coding Angular screens/components:
