القائمة
Ensure digital accessibility. Use when designing for accessibility, auditing WCAG compliance, or implementing a11y features. Covers WCAG 2.1 guidelines.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Render a self-contained HTML "tab-bar" presentation from a markdown PRD, Spec, ADR, or implementation Plan. Use when the user asks to "make a presentation", "render slides", "turn this prd/spec/adr/plan into a deck", "present this doc", "export to html", or "show this on screen". INPUT is ONE markdown file (a PRD, Spec, ADR, or Plan). OUTPUT is ONE .html slideshow that opens directly in a browser. Render only — do not invent content.
Design scalable, reliable software systems. Use when planning new systems, major features, or architecture changes. Covers C4 diagrams, trade-off analysis, and system decomposition.
Create execution roadmaps for projects. Use when planning multi-phase projects or feature rollouts. Covers phased delivery and milestone planning.
Create Product Requirements Documents. Use when defining new features, projects, or initiatives. Covers user stories, acceptance criteria, and scope definition.
Apply cloud-native architecture patterns. Use when designing for scalability, resilience, or cloud deployment. Covers microservices, containers, and distributed systems.
Apply Domain-Driven Design patterns. Use when modeling complex business domains, defining bounded contexts, or designing aggregates. Covers entities, value objects, and repositories.
| name | accessibility |
| description | Ensure digital accessibility. Use when designing for accessibility, auditing WCAG compliance, or implementing a11y features. Covers WCAG 2.1 guidelines. |
| allowed-tools | Read, Glob, Grep |
Content must be presentable in ways users can perceive.
Interface must be operable by all users.
Content and operation must be understandable.
Content must work with current and future technologies.
<!-- Bad -->
<img src="chart.png">
<!-- Good -->
<img src="chart.png" alt="Sales increased 25% in Q4 2024">
<!-- Bad -->
<input type="email" placeholder="Email">
<!-- Good -->
<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-hint">
<span id="email-hint">We'll never share your email</span>
<!-- Hidden visually but accessible -->
<span class="sr-only">Open menu</span>
<!-- Live regions for updates -->
<div aria-live="polite">Item added to cart</div>
<!-- Roles -->
<nav role="navigation">
<!-- States -->
<button aria-expanded="false">Menu</button>
<!-- Properties -->
<input aria-required="true">
<!-- Labels -->
<button aria-label="Close dialog">×</button>