Run any Skill in Manus with one click

quietfabric-design

Stars0

Forks0

UpdatedMay 30, 2026 at 16:35

Use this skill to generate well-branded interfaces and assets for QuietFabric, a calm technical design system for AI infrastructure (GPU clusters, model serving, distributed systems, observability). Use it for production UI or throwaway prototypes, mocks, decks, and architecture-review presentations. Contains essential design guidelines, colors, type, fonts, assets, UI kit components, and a reusable slide deck.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

ziwon

ziwon/skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations·SOC 27-1024

File Explorer

49 files

SKILL.md

readonly

name	quietfabric-design
description	Use this skill to generate well-branded interfaces and assets for QuietFabric, a calm technical design system for AI infrastructure (GPU clusters, model serving, distributed systems, observability). Use it for production UI or throwaway prototypes, mocks, decks, and architecture-review presentations. Contains essential design guidelines, colors, type, fonts, assets, UI kit components, and a reusable slide deck.
user-invocable	true

QuietFabric Design System — Skill

QuietFabric is a calm, dark-first design language for AI infrastructure. Invisible systems. Visible intelligence.

Read README.md first — it contains the full system: content fundamentals (voice/tone), visual foundations, iconography, and an index of every file. Then explore the other files as needed.

How to use this skill

Start with the tokens. Import fonts/fonts.css then colors_and_type.css for the canonical color, type, spacing, radius, motion, and elevation variables, plus semantic type roles. Fonts: Pretendard (locked brand sans, self-hosted in fonts/) + JetBrains Mono (technical truth).
Lift real components. The ui_kits/ folders are hi-fi recreations you can copy from:
- ui_kits/observability/ — infra dashboard (metric tiles, topology, charts, terminal)
- ui_kits/console/ — developer control plane (services, tabs, live deploy + logs)
- ui_kits/docs/ — technical article / docs page
- ui_kits/marketing/ — landing hero + 4 reusable hero variants (product / executive / architecture / proposal)
- Shared: ui_kits/icons.jsx, ui_kits/charts.jsx, ui_kits/qf-base.css
Make presentations. slides/ is a 23-slide architecture-review deck with data-editable charts (QF_DECK_DATA) and editable-PPTX export.
Brand assets. assets/quietfabric-mark.svg (3-node topology mark), assets/quiet-fabric-dark.png (reference).

When producing output

Visual artifacts (slides, mocks, throwaway prototypes): copy the assets you need out of this skill and produce static HTML files for the user to view. Keep the dark canvas, hairline borders, reserved accents, mono for technical truth, and the calm/precise voice.
Production code: copy assets and read the rules here to design as an expert in this brand.

If invoked without guidance, ask the user what they want to build, ask a few focused questions (surface, dark/light, content), then act as an expert QuietFabric designer who outputs HTML artifacts or production code.

Non-negotiables

Pretendard for sans, JetBrains Mono for code/IDs/metrics/logs.
Dark is canonical; light is a documentation/specimen mode.
No emoji in core UI. 1.5px line icons only. Gradients = signal flow, used sparingly.
Calm, precise, technical voice. Confidence from clarity, not volume.

Source

Reconstructed from the GitHub repo restack-ai/quite-fabric and an uploaded live specimen. Explore that repo for deeper fidelity.

Bundled into this repository from restack-ai/quite-fabric-design-system at commit 7e2f246c2736c47ec42e666f6d9522ce868d6f32.

More from this repository

same repository

mermaid-dark-theme

ziwon/skills

Produce Mermaid diagrams styled with my dark theme — a #171717 canvas, light hairline borders, and a fixed categorical palette via classDef. Use whenever I ask for a Mermaid diagram, flowchart, sequence/state/ER/class diagram, an architecture/system diagram, a README diagram, or say "mermaid", "dark theme diagram", "다이어그램 그려줘", "머메이드", "아키텍처 다이어그램". Default to this dark theme unless I explicitly ask for the default/light Mermaid look. Always emit the `%%{init}%%` header and reuse the canonical classDef library for diagram grammars that support it.

2026-07-150

grok-tool-augmented-research

ziwon/skills

Use Grok Build's current web_search/web_fetch tools as a bounded external-evidence layer inside coding, debugging, dependency evaluation, and autoresearch loops. Use for "Grok으로 검색해", fresh release/API/CVE evidence, recent community signal, or search-grounded hypotheses. Treat dedicated X corpus search as optional and only claim it when an installed MCP/tool explicitly provides it; never leak private repo data.

2026-07-150

headless-grok-automation

ziwon/skills

Automate Grok Build with current headless (-p/--single), JSON/streaming output, resumable sessions, bounded toolsets, permission rules, worktrees, and ACP. Use for "grok -p", CI/cron/batch reviews, unattended refactors, Grok as an engine, or custom ACP clients. Verify flags against the installed Grok docs and prefer explicit tool allowlists plus deny rules over unrestricted execution.

2026-07-150

milestone-delivery

ziwon/skills

Execute a repository milestone from GOAL.md through parallel implementation, staged review, CI, PR merge, and GitHub milestone closure. Use when Aaron asks to start, deliver, or complete the next milestone.

2026-07-140

orca-unrestricted-guardrails

ziwon/skills

Keep unrestricted/YOLO Orca and coding-agent execution fast while constraining destructive filesystem actions, secret exposure, external writes, and confidential data disclosure. Use whenever an agent runs with bypassed approvals or sandboxing, before rm/cleanup commands, infrastructure or remote writes, secret-bearing commands, force-push/history rewrites, or work in confidential repositories.

2026-07-130

n8n-mcp

ziwon/skills

Use when building, reviewing, debugging, validating, or safely deploying n8n workflows with the czlonkowski/n8n-mcp MCP server. Trigger on requests like "n8n workflow 만들어줘", "n8n-mcp 연결", "n8n 노드 찾아줘", "n8n 자동화 설계", "n8n credential/workflow 관리", or any task where an agent needs n8n node docs, templates, workflow JSON validation, or n8n API management. Always prefer read-only documentation/search first, work on copied workflows before production edits, and validate before deploy.

2026-06-060

name	quietfabric-design
description	Use this skill to generate well-branded interfaces and assets for QuietFabric, a calm technical design system for AI infrastructure (GPU clusters, model serving, distributed systems, observability). Use it for production UI or throwaway prototypes, mocks, decks, and architecture-review presentations. Contains essential design guidelines, colors, type, fonts, assets, UI kit components, and a reusable slide deck.
user-invocable	true

QuietFabric Design System — Skill

QuietFabric is a calm, dark-first design language for AI infrastructure. Invisible systems. Visible intelligence.

Read README.md first — it contains the full system: content fundamentals (voice/tone), visual foundations, iconography, and an index of every file. Then explore the other files as needed.

How to use this skill

Start with the tokens. Import fonts/fonts.css then colors_and_type.css for the canonical color, type, spacing, radius, motion, and elevation variables, plus semantic type roles. Fonts: Pretendard (locked brand sans, self-hosted in fonts/) + JetBrains Mono (technical truth).
Lift real components. The ui_kits/ folders are hi-fi recreations you can copy from:
- ui_kits/observability/ — infra dashboard (metric tiles, topology, charts, terminal)
- ui_kits/console/ — developer control plane (services, tabs, live deploy + logs)
- ui_kits/docs/ — technical article / docs page
- ui_kits/marketing/ — landing hero + 4 reusable hero variants (product / executive / architecture / proposal)
- Shared: ui_kits/icons.jsx, ui_kits/charts.jsx, ui_kits/qf-base.css
Make presentations. slides/ is a 23-slide architecture-review deck with data-editable charts (QF_DECK_DATA) and editable-PPTX export.
Brand assets. assets/quietfabric-mark.svg (3-node topology mark), assets/quiet-fabric-dark.png (reference).

When producing output

Visual artifacts (slides, mocks, throwaway prototypes): copy the assets you need out of this skill and produce static HTML files for the user to view. Keep the dark canvas, hairline borders, reserved accents, mono for technical truth, and the calm/precise voice.
Production code: copy assets and read the rules here to design as an expert in this brand.

Non-negotiables

Pretendard for sans, JetBrains Mono for code/IDs/metrics/logs.
Dark is canonical; light is a documentation/specimen mode.
No emoji in core UI. 1.5px line icons only. Gradients = signal flow, used sparingly.
Calm, precise, technical voice. Confidence from clarity, not volume.

Source

Reconstructed from the GitHub repo restack-ai/quite-fabric and an uploaded live specimen. Explore that repo for deeper fidelity.

Bundled into this repository from restack-ai/quite-fabric-design-system at commit 7e2f246c2736c47ec42e666f6d9522ce868d6f32.