@mohammadhprp/system-prompt 0.12.2 → 0.12.3

package/framework/skills/technical-design-doc-creator/examples.md

@@ -1,35 +0,0 @@
-# Technical Design Doc Creator Examples
-
-## Payment integration design doc
-
-User: "Create a TDD for integrating Stripe payments into our subscription system."
-
-Good agent behavior:
-
-- Ask about project size and type before generating, then size the document to the answer.
-- Detect the user's language and generate all headers and prose in it.
-- Enforce the mandatory sections: problem statement, scope, technical solution, risks, and implementation plan.
-- Make the Security section mandatory because this is a payment system, and collect PCI DSS, encryption, and PII handling details.
-- Keep the document at the architectural level: API contracts, data flow, and rollback strategy, not CLI commands or code snippets.
-
-## Small feature design doc
-
-User: "Write a design doc for adding user profile pictures."
-
-Good agent behavior:
-
-- Recognize this as a small feature and produce a streamlined TDD with only the essential sections.
-- Ask for the basic information needed: problem statement, scope, and technical approach.
-- Include an implementation plan with owner, status, and estimate columns.
-- Skip suggested sections like Migration Plan and Approval when they don't apply.
-
-## Migrating a database
-
-User: "Crie um TDD para migração do banco de dados PostgreSQL para MongoDB"
-
-Good agent behavior:
-
-- Detect Portuguese and generate the TDD in Portuguese with translated section headers.
-- Identify this as a data migration project and add a migration plan covering strategy, phases, and rollback.
-- Ask for the migration strategy, data mapping, and rollback plan before writing.
-- Note data integrity validation as a first-class concern rather than an afterthought.

package/framework/skills/web-design-guidelines/SKILL.md

@@ -1,65 +0,0 @@
----
-name: web-design-guidelines
-description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Focuses on visual design and interaction patterns. Do NOT use for performance audits (use core-web-vitals), SEO (use seo), or comprehensive site audits (use web-quality-audit).
-metadata:
-  author: vercel
-  version: '1.0.0'
-  argument-hint: <file-or-pattern>
----
-
-# Web Interface Guidelines
-
-Review files for compliance with Web Interface Guidelines.
-
-## How It Works
-
-1. Read the guidelines from `#[[file:references/guideline.md]]`
-2. Read the specified files (or prompt user for files/pattern)
-3. Check against all rules in the guidelines
-4. Output findings in the terse `file:line` format
-
-## Guidelines Reference
-
-All rules and output format instructions are in:
-
-```
-#[[file:references/guideline.md]]
-```
-
-The guidelines cover:
-
-- Accessibility (ARIA, semantic HTML, keyboard navigation)
-- Focus states and keyboard interaction
-- Forms (autocomplete, validation, labels)
-- Animation (reduced motion, performance)
-- Typography (proper characters, number formatting)
-- Content handling (overflow, empty states)
-- Images (dimensions, lazy loading)
-- Performance (virtualization, DOM reads)
-- Navigation & state (URL sync, deep linking)
-- Touch & interaction (tap delays, safe areas)
-- Dark mode & theming
-- Locale & i18n
-- Hydration safety
-- Common anti-patterns to flag
-
-## Usage
-
-When a user provides a file or pattern argument:
-
-1. Read the guidelines from `references/guideline.md`
-2. Read the specified files
-3. Apply all rules from the guidelines
-4. Output findings using the format specified in the guidelines
-
-If no files specified, ask the user which files to review.
-
-## Output Format
-
-Follow the format in the guidelines:
-
-- Group findings by file
-- Use `file:line` format (VS Code clickable)
-- Terse, high signal-to-noise
-- State issue + location
-- Skip explanation unless fix is non-obvious

package/framework/skills/web-design-guidelines/examples.md

@@ -1,32 +0,0 @@
-# Web Design Guidelines Examples
-
-## Review a component for accessibility
-
-User: "Review my dropdown component."
-
-Good agent behavior:
-
-- Read the guidelines from `references/guideline.md` first, then the specified file.
-- Check ARIA usage, keyboard navigation, focus states, and semantic HTML against the rules.
-- Output findings grouped by file in `file:line` format, state the issue and location, and skip explanations unless the fix is non-obvious.
-
-## Audit a page's interaction patterns
-
-User: "Check my checkout page against best practices."
-
-Good agent behavior:
-
-- Apply the rules for forms (labels, validation, autocomplete), touch targets, tap delays, and reduced motion.
-- Flag focus visibility and safe-area issues on mobile.
-- Keep the output terse and high signal-to-noise: issue + `file:line` location.
-- Redirect the user to the right skill when a request is out of scope, such as a performance audit.
-
-## Review without a file specified
-
-User: "Audit my site."
-
-Good agent behavior:
-
-- Ask which files or pattern to review before starting, since the skill needs a target.
-- Once provided, read the files and check them against all rules in the guidelines.
-- Produce the grouped `file:line` findings rather than a prose essay.

package/framework/skills/web-design-guidelines/references/guideline.md

@@ -1,174 +0,0 @@
-# Web Interface Guidelines
-
-Review these files for compliance: $ARGUMENTS
-
-Read files, check against rules below. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise.
-
-## Rules
-
-### Accessibility
-
-- Icon-only buttons need `aria-label`
-- Form controls need `<label>` or `aria-label`
-- Interactive elements need keyboard handlers (`onKeyDown`/`onKeyUp`)
-- `<button>` for actions, `<a>`/`<Link>` for navigation (not `<div onClick>`)
-- Images need `alt` (or `alt=""` if decorative)
-- Decorative icons need `aria-hidden="true"`
-- Async updates (toasts, validation) need `aria-live="polite"`
-- Use semantic HTML (`<button>`, `<a>`, `<label>`, `<table>`) before ARIA
-- Headings hierarchical `<h1>`–`<h6>`; include skip link for main content
-- `scroll-margin-top` on heading anchors
-
-### Focus States
-
-- Interactive elements need visible focus: `focus-visible:ring-*` or equivalent
-- Never `outline-none` / `outline: none` without focus replacement
-- Use `:focus-visible` over `:focus` (avoid focus ring on click)
-- Group focus with `:focus-within` for compound controls
-
-### Forms
-
-- Inputs need `autocomplete` and meaningful `name`
-- Use correct `type` (`email`, `tel`, `url`, `number`) and `inputmode`
-- Never block paste (`onPaste` + `preventDefault`)
-- Labels clickable (`htmlFor` or wrapping control)
-- Disable spellcheck on emails, codes, usernames (`spellCheck={false}`)
-- Checkboxes/radios: label + control share single hit target (no dead zones)
-- Submit button stays enabled until request starts; spinner during request
-- Errors inline next to fields; focus first error on submit
-- Placeholders end with `…` and show example pattern
-- `autocomplete="off"` on non-auth fields to avoid password manager triggers
-- Warn before navigation with unsaved changes (`beforeunload` or router guard)
-
-### Animation
-
-- Honor `prefers-reduced-motion` (provide reduced variant or disable)
-- Animate `transform`/`opacity` only (compositor-friendly)
-- Never `transition: all`—list properties explicitly
-- Set correct `transform-origin`
-- SVG: transforms on `<g>` wrapper with `transform-box: fill-box; transform-origin: center`
-- Animations interruptible—respond to user input mid-animation
-
-### Typography
-
-- `…` not `...`
-- Curly quotes `"` `"` not straight `"`
-- Non-breaking spaces: `10&nbsp;MB`, `⌘&nbsp;K`, brand names
-- Loading states end with `…`: `"Loading…"`, `"Saving…"`
-- `font-variant-numeric: tabular-nums` for number columns/comparisons
-- Use `text-wrap: balance` or `text-pretty` on headings (prevents widows)
-
-### Content Handling
-
-- Text containers handle long content: `truncate`, `line-clamp-*`, or `break-words`
-- Flex children need `min-w-0` to allow text truncation
-- Handle empty states—don't render broken UI for empty strings/arrays
-- User-generated content: anticipate short, average, and very long inputs
-
-### Images
-
-- `<img>` needs explicit `width` and `height` (prevents CLS)
-- Below-fold images: `loading="lazy"`
-- Above-fold critical images: `priority` or `fetchpriority="high"`
-
-### Performance
-
-- Large lists (>50 items): virtualize (`virtua`, `content-visibility: auto`)
-- No layout reads in render (`getBoundingClientRect`, `offsetHeight`, `offsetWidth`, `scrollTop`)
-- Batch DOM reads/writes; avoid interleaving
-- Prefer uncontrolled inputs; controlled inputs must be cheap per keystroke
-- Add `<link rel="preconnect">` for CDN/asset domains
-- Critical fonts: `<link rel="preload" as="font">` with `font-display: swap`
-
-### Navigation & State
-
-- URL reflects state—filters, tabs, pagination, expanded panels in query params
-- Links use `<a>`/`<Link>` (Cmd/Ctrl+click, middle-click support)
-- Deep-link all stateful UI (if uses `useState`, consider URL sync via nuqs or similar)
-- Destructive actions need confirmation modal or undo window—never immediate
-
-### Touch & Interaction
-
-- `touch-action: manipulation` (prevents double-tap zoom delay)
-- `-webkit-tap-highlight-color` set intentionally
-- `overscroll-behavior: contain` in modals/drawers/sheets
-- During drag: disable text selection, `inert` on dragged elements
-- `autoFocus` sparingly—desktop only, single primary input; avoid on mobile
-
-### Safe Areas & Layout
-
-- Full-bleed layouts need `env(safe-area-inset-*)` for notches
-- Avoid unwanted scrollbars: `overflow-x-hidden` on containers, fix content overflow
-- Flex/grid over JS measurement for layout
-
-### Dark Mode & Theming
-
-- `color-scheme: dark` on `<html>` for dark themes (fixes scrollbar, inputs)
-- `<meta name="theme-color">` matches page background
-- Native `<select>`: explicit `background-color` and `color` (Windows dark mode)
-
-### Locale & i18n
-
-- Dates/times: use `Intl.DateTimeFormat` not hardcoded formats
-- Numbers/currency: use `Intl.NumberFormat` not hardcoded formats
-- Detect language via `Accept-Language` / `navigator.languages`, not IP
-
-### Hydration Safety
-
-- Inputs with `value` need `onChange` (or use `defaultValue` for uncontrolled)
-- Date/time rendering: guard against hydration mismatch (server vs client)
-- `suppressHydrationWarning` only where truly needed
-
-### Hover & Interactive States
-
-- Buttons/links need `hover:` state (visual feedback)
-- Interactive states increase contrast: hover/active/focus more prominent than rest
-
-### Content & Copy
-
-- Active voice: "Install the CLI" not "The CLI will be installed"
-- Title Case for headings/buttons (Chicago style)
-- Numerals for counts: "8 deployments" not "eight"
-- Specific button labels: "Save API Key" not "Continue"
-- Error messages include fix/next step, not just problem
-- Second person; avoid first person
-- `&` over "and" where space-constrained
-
-### Anti-patterns (flag these)
-
-- `user-scalable=no` or `maximum-scale=1` disabling zoom
-- `onPaste` with `preventDefault`
-- `transition: all`
-- `outline-none` without focus-visible replacement
-- Inline `onClick` navigation without `<a>`
-- `<div>` or `<span>` with click handlers (should be `<button>`)
-- Images without dimensions
-- Large arrays `.map()` without virtualization
-- Form inputs without labels
-- Icon buttons without `aria-label`
-- Hardcoded date/number formats (use `Intl.*`)
-- `autoFocus` without clear justification
-
-## Output Format
-
-Group by file. Use `file:line` format (VS Code clickable). Terse findings.
-
-```text
-## src/Button.tsx
-
-src/Button.tsx:42 - icon button missing aria-label
-src/Button.tsx:18 - input lacks label
-src/Button.tsx:55 - animation missing prefers-reduced-motion
-src/Button.tsx:67 - transition: all → list properties
-
-## src/Modal.tsx
-
-src/Modal.tsx:12 - missing overscroll-behavior: contain
-src/Modal.tsx:34 - "..." → "…"
-
-## src/Card.tsx
-
-✓ pass
-```
-
-State issue + location. Skip explanation unless fix non-obvious. No preamble.