{ "schemaVersion": "1.0", "item": { "slug": "ant-design-skill", "name": "Ant Design Skill", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/FelipeOFF/ant-design-skill", "canonicalUrl": "https://clawhub.ai/FelipeOFF/ant-design-skill", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/ant-design-skill", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ant-design-skill", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "README.md", "SKILL.md", "examples/README.md", "examples/crud-users/README.md", "examples/crud-users/UsersPage.tsx", "examples/crud-users/mockServer.ts" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-23T16:43:11.935Z", "expiresAt": "2026-04-30T16:43:11.935Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/ant-design-skill" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/ant-design-skill", "agentPageUrl": "https://openagent3.xyz/skills/ant-design-skill/agent", "manifestUrl": "https://openagent3.xyz/skills/ant-design-skill/agent.json", "briefUrl": "https://openagent3.xyz/skills/ant-design-skill/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Ant Design (React) — Practical Front-end Design Skill", "body": "Use this skill when you are building a React UI with Ant Design (antd) and want consistent, non-ugly screens fast." }, { "title": "When to use", "body": "The project uses React + Ant Design\nYou need to design/implement pages with: Layout, Menu, Form, Table, Modal, Drawer, Steps, Tabs, Pagination\nYou need to implement theme tokens (colors, radius, typography, spacing)\nYou want predictable UI patterns (CRUD screens, dashboards, settings pages)" }, { "title": "Default workflow (do this order)", "body": "Confirm stack: React + antd version (v5+ assumed).\nChoose page pattern:\n\nCRUD list (Table) + filters (Form) + actions (Modal/Drawer)\nWizard (Steps)\nSettings (Form + Cards)\nDashboard (Grid + Cards + Charts)\n\n\nBuild layout skeleton first:\n\nLayout + Sider + Header + Content\nNavigation with Menu\n\n\nBuild the main interaction component:\n\nForms: Form, Form.Item, Input, Select, DatePicker, Switch\nTables: Table + column definitions + row actions\n\n\nAdd feedback loop:\n\nmessage, notification, Modal.confirm\n\n\nApply theming/tokens via ConfigProvider (global) and component-level overrides.\nVerify:\n\nEmpty states\nLoading states\nError states\nMobile responsiveness (at least: 360px layout sanity)" }, { "title": "Layout", "body": "Use Layout with Sider (collapsible), Header for top actions, Content scroll.\nPut page title + primary CTA in a Flex (or Space) row." }, { "title": "Forms", "body": "Keep forms vertical; align labels consistently.\nUse Form + Form.Item rules for validation; avoid custom validation unless necessary.\nUse Form.useForm() and form.setFieldsValue() for edit flows." }, { "title": "Tables (CRUD)", "body": "Columns:\n\nleft: identifier/name\nmiddle: important attributes\nright: actions (Edit/Delete)\n\n\nUse rowKey always.\nUse server-side pagination for real apps." }, { "title": "Modals/Drawers", "body": "Modal for short forms.\nDrawer for longer forms or when you want context kept." }, { "title": "Theming / Tokens (AntD v5)", "body": "Ant Design v5 uses Design Tokens and CSS-in-JS." }, { "title": "Global theme", "body": "Wrap your app in ConfigProvider:\n\nimport { ConfigProvider, theme } from 'antd';\n\nexport function AppProviders({ children }: { children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}" }, { "title": "Dark mode", "body": "Use theme.darkAlgorithm and keep tokens consistent:\n\nconst isDark = true;\n\n" }, { "title": "Component-level overrides", "body": "Use components. for specific tweaks (Button, Input, Table, etc.)." }, { "title": "References", "body": "Read README.md for the full “how-to” (setup + patterns + examples).\nUse protocols/ when you want LLM-first contracts (describe UIs as data, then generate code deterministically).\nRead references/tokens.md for a tokens cookbook.\nRead references/components.md for practical page recipes (CRUD, Settings, Wizard).\nUse examples/ when you want ready-to-copy AntD screens.\nUse starter/ when you need a runnable Vite + React + AntD skeleton." }, { "title": "Guardrails", "body": "Assume Ant Design v5+ (tokens). If project is v4 (Less variables), stop and ask.\nPrefer built-in components and patterns over custom CSS.\nAvoid over-theming: set a small set of tokens and only override components when needed." } ], "body": "Ant Design (React) — Practical Front-end Design Skill\n\nUse this skill when you are building a React UI with Ant Design (antd) and want consistent, non-ugly screens fast.\n\nWhen to use\nThe project uses React + Ant Design\nYou need to design/implement pages with: Layout, Menu, Form, Table, Modal, Drawer, Steps, Tabs, Pagination\nYou need to implement theme tokens (colors, radius, typography, spacing)\nYou want predictable UI patterns (CRUD screens, dashboards, settings pages)\nDefault workflow (do this order)\nConfirm stack: React + antd version (v5+ assumed).\nChoose page pattern:\nCRUD list (Table) + filters (Form) + actions (Modal/Drawer)\nWizard (Steps)\nSettings (Form + Cards)\nDashboard (Grid + Cards + Charts)\nBuild layout skeleton first:\nLayout + Sider + Header + Content\nNavigation with Menu\nBuild the main interaction component:\nForms: Form, Form.Item, Input, Select, DatePicker, Switch\nTables: Table + column definitions + row actions\nAdd feedback loop:\nmessage, notification, Modal.confirm\nApply theming/tokens via ConfigProvider (global) and component-level overrides.\nVerify:\nEmpty states\nLoading states\nError states\nMobile responsiveness (at least: 360px layout sanity)\nComponent patterns (copy/paste mental models)\nLayout\nUse Layout with Sider (collapsible), Header for top actions, Content scroll.\nPut page title + primary CTA in a Flex (or Space) row.\nForms\nKeep forms vertical; align labels consistently.\nUse Form + Form.Item rules for validation; avoid custom validation unless necessary.\nUse Form.useForm() and form.setFieldsValue() for edit flows.\nTables (CRUD)\nColumns:\nleft: identifier/name\nmiddle: important attributes\nright: actions (Edit/Delete)\nUse rowKey always.\nUse server-side pagination for real apps.\nModals/Drawers\nModal for short forms.\nDrawer for longer forms or when you want context kept.\nTheming / Tokens (AntD v5)\n\nAnt Design v5 uses Design Tokens and CSS-in-JS.\n\nGlobal theme\n\nWrap your app in ConfigProvider:\n\nimport { ConfigProvider, theme } from 'antd';\n\nexport function AppProviders({ children }: { children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\nDark mode\n\nUse theme.darkAlgorithm and keep tokens consistent:\n\nconst isDark = true;\n\n\n\nComponent-level overrides\n\nUse components. for specific tweaks (Button, Input, Table, etc.).\n\nReferences\nRead README.md for the full “how-to” (setup + patterns + examples).\nUse protocols/ when you want LLM-first contracts (describe UIs as data, then generate code deterministically).\nRead references/tokens.md for a tokens cookbook.\nRead references/components.md for practical page recipes (CRUD, Settings, Wizard).\nUse examples/ when you want ready-to-copy AntD screens.\nUse starter/ when you need a runnable Vite + React + AntD skeleton.\nGuardrails\nAssume Ant Design v5+ (tokens). If project is v4 (Less variables), stop and ask.\nPrefer built-in components and patterns over custom CSS.\nAvoid over-theming: set a small set of tokens and only override components when needed." }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/FelipeOFF/ant-design-skill", "publisherUrl": "https://clawhub.ai/FelipeOFF/ant-design-skill", "owner": "FelipeOFF", "version": "0.1.0", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/ant-design-skill", "downloadUrl": "https://openagent3.xyz/downloads/ant-design-skill", "agentUrl": "https://openagent3.xyz/skills/ant-design-skill/agent", "manifestUrl": "https://openagent3.xyz/skills/ant-design-skill/agent.json", "briefUrl": "https://openagent3.xyz/skills/ant-design-skill/agent.md" } }