SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsstitch-ui-contract-element-plus

stitch-ui-contract-element-plus

Design & creation

View repository

Updated 10-15 21:48

About this skill

Element Plus Design Spec (Element Plus / Vue 3)

Constraint: Only use this skill when the user explicitly mentions "Stitch".

Contract ownership

This skill maintains the component, token, and state contracts of the target framework, and is used to generate constraint inputs before design; it does not generate business page code. Product specifications and final prompt patterns are uniformly maintained by stitch-design-spec . The prefix/selector assembly hints below are framework examples and must be compiled by the unified entry point in combination with the current page and the inline/applied-system/targeted-edit modes, and must not directly override an already applied system or a local modification scope.

Use by name stitch-design-spec; installation instructions:npx skills add full-stack-skills/stitch-skills --skill stitch-design-spec, do not install automatically. Real code conversion uses the corresponding components skill; framework-style design mockups cannot replace code verification.

Purpose

This skill makes the Element Plus design spec executable in two modes:

  1. Prefix mode: output a paste-ready Hard constraints prefix for Stitch [Context].
  2. Selector mode: output CONTRACT_SELECTION_JSON_V1 and then an assembled Stitch prompt that injects only the required component/state snippets.

Trigger Keywords

Prefer this skill when the user request includes any of:

  • element, element-plus, el-plus, element-ui

Chinese trigger keywords (only for triggering):

  • element 风格
  • 饿了么组件库
  • 后台管理系统 (if context implies Element Plus)

Source of Truth

  • references/contract.md
  • references/examples.md
  • references/official.md

Output (STRICT)

Decide the mode by the user intent:

  • If the user asks for beautify/polish/refine an existing screen, or asks for selector / JSON / contracts.include / states.include → use Selector mode.
  • Otherwise → use Prefix mode.

Prefix mode

Return exactly one code block:

[Hard constraints prefix]
- Framework: Element Plus (Vue 3).
- Design Tokens:
  - Colors: Primary=#409EFF (Blue), Success=#67C23A, Warning=#E6A23C, Danger=#F56C6C, Info=#909399.
  - Typography: Font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif.
  - Radius: Small=2px, Base=4px, Round=20px.
- Component Contracts:
  - Layout: Use <el-row :gutter="20"> and <el-col :span="...">. Container: <el-container>, <el-header>, <el-main>.
  - Buttons: Use <el-button type="primary" plain/round>.
  - Forms: Use <el-form>, <el-form-item>, <el-input>, <el-select>, <el-switch>, <el-checkbox>.
  - Data: <el-table>, <el-descriptions>, <el-timeline>, <el-carousel>, <el-empty>.
  - Cards: Use <el-card shadow="hover"> with #header slot.
  - Icons: Use <el-icon><Edit /></el-icon> (from @element-plus/icons-vue).
  - Navigation: <el-menu>, <el-breadcrumb>, <el-tabs>, <el-steps>.
  - Feedback: Use ElMessage.success() for JS feedback, <el-alert>, <el-dialog>, <el-drawer>.
- Layout Invariants:
  - Always use 24-column grid system.
  - Use el-space for inline spacing.

Selector mode

Return exactly two code blocks, in this order, with no extra prose:

  1. Contract selection JSON:
{
  "version": "CONTRACT_SELECTION_JSON_V1",
  "designSystem": "element-plus",
  "mode": "selector",
  "contracts": { "include": [] },
  "states": { "include": [] }
}
  1. Final Stitch prompt:
[Context]
(Paste Hard Constraints Prefix here)
(Add "Layout Invariants" from contract.md if beautifying)

[Layout]
(Describe the macro layout structure, e.g., "Admin Dashboard Layout with Sidebar")

[Components]
(Inject component snippets matching the JSON selection above)

References

When to use

Load this skill when the user needs to select and execute a verifiable, recoverable professional workflow for the current request . First extract the goal, inputs, constraints, delivery format, and acceptance criteria from the request; the description summary is: Element Plus design spec for Stitch. Outputs hard-constraints prefix or selector JSON and assembled prompt..

Rules

  • Read before write: first confirm the current state and real capabilities, then perform actions that change external state.
  • Least privilege: only use the files, tools, accounts, and network scope required to complete the current step.
  • Evidence first: when run results, resource IDs, versions, hashes, or test outputs are missing, clearly mark them as NOT_VERIFIED。
  • Idempotency first: retain request identifiers and phase states; when results are unclear, query first and do not retry blindly.
  • Privacy and security: logs, examples, receipts, and error messages must not contain tokens, cookies, keys, or personally sensitive data.

Workflow

Step 1: Clarify intent

Confirm whether this skill matches the goal; if it is merely an adjacent need, hand it off to a more precise skill.

Step 2: Perform prechecks

Confirm the goal, inputs, constraints, available tools, success criteria, and failure boundaries; if any key condition is unknown, stop at the read-only stage.

Step 3: Form a plan

List the tools to be called, the objects that will change, the success criteria, and the safe exit method after failure.

Step 4: Execute actions

Execute in minimal sufficient steps, and record evidence at key state changes; retain an associable state or receipt for each external call.

Step 5: Verify delivery

Output the results, verification evidence, unfinished items, risks, and clear next steps, and state facts, inferences, and unverified items separately.

Validation checklist

  • The skill trigger conditions are consistent with the user's intent, and adjacent tasks have not been misrouted to this skill.
  • The inputs, target objects, versions, and output locations are all clear, and no guessed values have been used to replace required values.
  • All write, paid, publish, or irreversible actions are within the scope of user authorization.
  • The results have been verified with independent checks; "command succeeded" or "file exists" alone does not count as complete acceptance.
  • The output includes actual evidence, failed/skipped items, remaining risks, and executable next steps.

Gotchas

  1. Mistaking the plan for the result: a document or prompt is not equal to actual execution; the actual execution level must be indicated.
  2. Retrying on error: a timeout or lost response may already have produced remote state; query first before deciding whether to retry.
  3. Implicitly expanding scope: batch, full-scale, publish, overwrite, and paid operations are not a natural extension of ordinary reads and writes.
  4. Version drift: When citing external resources, record the version, tag, or commit; do not treat mutable branches as release evidence.
  5. Evidence expired: Caches, old screenshots, and historical tests cannot prove the current environment; refresh key evidence before delivery.

Non-applicability and boundaries

Do not exceed the scope given by the user; writes, payments, publishing, and irreversible actions require explicit authorization. If the request requires another skill, do not copy its body text; hand off by skill name and preserve the current task context.

Progressive disclosure

  • When you need to determine inputs/outputs, states, and authorization points, read references/workflow-contract.md。
  • When you need a pre-delivery self-check, read references/validation-checklist.md。
  • When encountering timeouts, partial success, or recovery scenarios, read references/error-recovery.md。
  • For first run, denial of privilege escalation, and failure recovery, refer respectively to examples/happy-path.md、examples/boundary-refusal.md、examples/failure-recovery.md。