mirror of
https://github.com/nexu-io/open-design.git
synced 2026-07-03 12:27:55 +08:00
Add Glass Design System UI Kit plugin (#4395)
* Add G2 design system UI Kit plugin * Fix G2 UI kit packaged references * Trigger workspace validation * Prevent G2 input preview submit
This commit is contained in:
ACAT
33
plugins/community/g2-design-system-ui-kit-mqgbmh2w/README.md
Normal file
33
plugins/community/g2-design-system-ui-kit-mqgbmh2w/README.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# G2 Design System UI Kit
|
||||
|
||||
This community plugin packages a reviewable UI kit for the HiCatcat G2 AR glasses HUD design system.
|
||||
|
||||
## What It Enables
|
||||
|
||||
- Generate dark G2 HUD-style prototypes inside Open Design.
|
||||
- Reuse source-backed role components for call, message, AI card, teleprompter, device, and bottom command surfaces.
|
||||
- Switch between regular 640 display scale and compact 320 display scale.
|
||||
- Avoid generic mobile, SaaS dashboard, marketing page, and warm brand-kit styling.
|
||||
|
||||
## Files
|
||||
|
||||
- `SKILL.md` - Agent instructions.
|
||||
- `open-design.json` - Plugin manifest.
|
||||
- `index.html` - Browser-reviewable UI kit entry.
|
||||
- `colors_and_type.css` - G2 token CSS.
|
||||
- `components/` - React/Babel component files used by `index.html`.
|
||||
- `references/` - Provenance and source notes.
|
||||
|
||||
## Review
|
||||
|
||||
Open `index.html` in a browser. The page loads local CSS and component files from this plugin directory. It uses React, ReactDOM, and Babel from CDN only for the preview shell.
|
||||
|
||||
The root element uses `data-g2-mode="regular"`. Change it to `data-g2-mode="compact"` to review the 320-mode scale.
|
||||
|
||||
## Validation
|
||||
|
||||
The plugin is valid when:
|
||||
|
||||
- Every path named in `SKILL.md` and `open-design.json` exists.
|
||||
- `index.html` references `./colors_and_type.css` and files under `./components/`.
|
||||
- The visual direction stays aligned with G2 AR glasses HUD tokens.
|
||||
37
plugins/community/g2-design-system-ui-kit-mqgbmh2w/SKILL.md
Normal file
37
plugins/community/g2-design-system-ui-kit-mqgbmh2w/SKILL.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# G2 Design System UI Kit
|
||||
|
||||
Use this skill when generating Open Design artifacts that should follow the HiCatcat G2 AR glasses HUD design system. This plugin packages a browser-reviewable UI kit, local token CSS, and modular React role components.
|
||||
|
||||
## Structure
|
||||
|
||||
- `index.html` - Browser-reviewable entry that loads `./colors_and_type.css`, React, ReactDOM, Babel, and the component files.
|
||||
- `colors_and_type.css` - Source-backed G2 token CSS for dark HUD color, type, spacing, radius, icon, stroke, and compact/regular display modes.
|
||||
- `components/App.jsx` - App shell that composes the G2 HUD surface.
|
||||
- `components/Sidebar.jsx` - Compact system rail for mode, call, messages, AI, and device controls.
|
||||
- `components/AssistantsList.jsx` - AI card and quick status pattern.
|
||||
- `components/ChatArea.jsx` - Primary message, call, and teleprompter workspace.
|
||||
- `components/InputBar.jsx` - Bottom command-entry surface.
|
||||
- `components/MessageBubble.jsx` - Message, note, and assistant response unit.
|
||||
- `README.md` - Human-readable package guide and validation notes.
|
||||
|
||||
## Usage
|
||||
|
||||
Open `index.html` directly for visual review. Copy component files into a React prototype when building product-like artifacts. Keep `colors_and_type.css` loaded before the components so color, type, spacing, radius, stroke, and mode variables resolve through the G2 token contract.
|
||||
|
||||
## Design Notes
|
||||
|
||||
Use G2 as a dark AR glasses control interface, not a generic mobile app, SaaS dashboard, or marketing page. Preserve these source-backed cues:
|
||||
|
||||
- Black optical canvas.
|
||||
- White, secondary gray, and tertiary gray text.
|
||||
- `#333333` controls, borders, and disabled surfaces.
|
||||
- `#0D76FF` selected state.
|
||||
- `#0D76FFA6` focus and touch feedback.
|
||||
- Noto Sans Medium/Bold typography.
|
||||
- `data-g2-mode="regular"` for 640 mode and `data-g2-mode="compact"` for 320 mode.
|
||||
|
||||
Do not invent off-token accent colors, glassmorphism, or landing-page hero compositions.
|
||||
|
||||
## Provenance
|
||||
|
||||
Formalized by Open Design from candidate 33633026-3f08-4a00-86c8-1bbd1d3e1ce4 and corrected so every referenced file is packaged in this plugin folder.
|
||||
@@ -0,0 +1,238 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--g2-bg: #000000;
|
||||
--g2-text-primary: #ffffff;
|
||||
--g2-text-secondary: #dddddd;
|
||||
--g2-text-tertiary: #bbbbbb;
|
||||
--g2-control: #333333;
|
||||
--g2-control-gradient: linear-gradient(177deg, #ffffff40 0%, #ffffff0d 49.52%, #ffffff26 100%);
|
||||
--g2-selected: #0d76ff;
|
||||
--g2-focus: #0d76ffa6;
|
||||
--g2-ai-01: linear-gradient(225deg, #78ffff 0%, #9442fe 100%);
|
||||
--g2-ai-07: linear-gradient(135deg, #38f9c5 0%, #0d35ff 35.5%, #ff3fa9 76.64%, #ffce3a 100%);
|
||||
--g2-font-family: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--g2-font-weight-body: 500;
|
||||
--g2-font-weight-bold: 700;
|
||||
--g2-font-size-s: 24px;
|
||||
--g2-font-size-m: 32px;
|
||||
--g2-font-size-l: 48px;
|
||||
--g2-line-height-s: 32px;
|
||||
--g2-line-height-m: 48px;
|
||||
--g2-line-height-l: 60px;
|
||||
--g2-space-1: 4px;
|
||||
--g2-space-2: 8px;
|
||||
--g2-space-3: 12px;
|
||||
--g2-space-4: 16px;
|
||||
--g2-space-5: 24px;
|
||||
--g2-space-xl: 32px;
|
||||
--g2-radius-sm: 12px;
|
||||
--g2-radius-md: 16px;
|
||||
--g2-radius-lg: 24px;
|
||||
--g2-stroke: 2px;
|
||||
--g2-icon-lg: 48px;
|
||||
--g2-max-dialog: 520px;
|
||||
--g2-max-message: 520px;
|
||||
--g2-max-toast: 440px;
|
||||
--g2-max-bottom-bar: 640px;
|
||||
--g2-ai-status-size: 100px;
|
||||
}
|
||||
|
||||
[data-g2-mode="compact"] {
|
||||
--g2-font-size-s: 14px;
|
||||
--g2-font-size-m: 20px;
|
||||
--g2-font-size-l: 24px;
|
||||
--g2-line-height-s: 16px;
|
||||
--g2-line-height-m: 24px;
|
||||
--g2-line-height-l: 32px;
|
||||
--g2-space-1: 2px;
|
||||
--g2-space-2: 4px;
|
||||
--g2-space-3: 6px;
|
||||
--g2-space-4: 8px;
|
||||
--g2-space-5: 12px;
|
||||
--g2-space-xl: 16px;
|
||||
--g2-radius-sm: 6px;
|
||||
--g2-radius-md: 8px;
|
||||
--g2-radius-lg: 12px;
|
||||
--g2-stroke: 1px;
|
||||
--g2-icon-lg: 24px;
|
||||
--g2-max-dialog: 260px;
|
||||
--g2-max-message: 260px;
|
||||
--g2-max-toast: 220px;
|
||||
--g2-max-bottom-bar: 320px;
|
||||
--g2-ai-status-size: 72px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--g2-bg);
|
||||
color: var(--g2-text-primary);
|
||||
font-family: var(--g2-font-family);
|
||||
font-size: var(--g2-font-size-s);
|
||||
font-weight: var(--g2-font-weight-body);
|
||||
line-height: var(--g2-line-height-s);
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.g2-app {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(96px, 160px) minmax(0, 1fr);
|
||||
gap: var(--g2-space-5);
|
||||
padding: var(--g2-space-5);
|
||||
background:
|
||||
radial-gradient(circle at 70% 18%, #0d76ff22, transparent 32%),
|
||||
var(--g2-bg);
|
||||
}
|
||||
|
||||
.g2-panel {
|
||||
border: var(--g2-stroke) solid var(--g2-control);
|
||||
border-radius: var(--g2-radius-md);
|
||||
background: var(--g2-control);
|
||||
color: var(--g2-text-primary);
|
||||
}
|
||||
|
||||
.g2-sidebar,
|
||||
.g2-workspace,
|
||||
.g2-card,
|
||||
.g2-input-bar {
|
||||
border: var(--g2-stroke) solid var(--g2-control);
|
||||
border-radius: var(--g2-radius-md);
|
||||
background: var(--g2-control);
|
||||
}
|
||||
|
||||
.g2-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--g2-space-3);
|
||||
padding: var(--g2-space-4);
|
||||
}
|
||||
|
||||
.g2-nav-button,
|
||||
.g2-send-button {
|
||||
border: var(--g2-stroke) solid transparent;
|
||||
border-radius: var(--g2-radius-sm);
|
||||
background: transparent;
|
||||
color: var(--g2-text-secondary);
|
||||
min-height: var(--g2-icon-lg);
|
||||
padding: var(--g2-space-2) var(--g2-space-3);
|
||||
}
|
||||
|
||||
.g2-nav-button[aria-current="true"],
|
||||
.g2-send-button {
|
||||
background: var(--g2-selected);
|
||||
color: var(--g2-text-primary);
|
||||
}
|
||||
|
||||
.g2-nav-button:focus-visible,
|
||||
.g2-send-button:focus-visible,
|
||||
.g2-command-input:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 var(--g2-stroke) var(--g2-focus);
|
||||
}
|
||||
|
||||
.g2-workspace {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: var(--g2-space-5);
|
||||
padding: var(--g2-space-5);
|
||||
max-width: var(--g2-max-bottom-bar);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.g2-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--g2-space-4);
|
||||
}
|
||||
|
||||
.g2-title {
|
||||
margin: 0;
|
||||
font-size: var(--g2-font-size-m);
|
||||
line-height: var(--g2-line-height-m);
|
||||
font-weight: var(--g2-font-weight-bold);
|
||||
}
|
||||
|
||||
.g2-meta,
|
||||
.g2-secondary {
|
||||
color: var(--g2-text-secondary);
|
||||
}
|
||||
|
||||
.g2-tertiary {
|
||||
color: var(--g2-text-tertiary);
|
||||
}
|
||||
|
||||
.g2-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr);
|
||||
gap: var(--g2-space-5);
|
||||
}
|
||||
|
||||
.g2-thread,
|
||||
.g2-assistants {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--g2-space-3);
|
||||
}
|
||||
|
||||
.g2-message {
|
||||
max-width: var(--g2-max-message);
|
||||
border-radius: var(--g2-radius-md);
|
||||
padding: var(--g2-space-4);
|
||||
background: #000000;
|
||||
border: var(--g2-stroke) solid var(--g2-control);
|
||||
}
|
||||
|
||||
.g2-message[data-tone="ai"] {
|
||||
border-color: var(--g2-focus);
|
||||
}
|
||||
|
||||
.g2-card {
|
||||
padding: var(--g2-space-4);
|
||||
}
|
||||
|
||||
.g2-ai-orb {
|
||||
width: var(--g2-ai-status-size);
|
||||
height: var(--g2-ai-status-size);
|
||||
border-radius: 50%;
|
||||
background: var(--g2-ai-07);
|
||||
margin-bottom: var(--g2-space-3);
|
||||
}
|
||||
|
||||
.g2-input-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--g2-space-3);
|
||||
padding: var(--g2-space-3);
|
||||
}
|
||||
|
||||
.g2-command-input {
|
||||
min-width: 0;
|
||||
border: var(--g2-stroke) solid var(--g2-control);
|
||||
border-radius: var(--g2-radius-sm);
|
||||
background: #000000;
|
||||
color: var(--g2-text-primary);
|
||||
padding: var(--g2-space-2) var(--g2-space-3);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.g2-app,
|
||||
.g2-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.g2-sidebar {
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
function App() {
|
||||
const Sidebar = window.Sidebar;
|
||||
const ChatArea = window.ChatArea;
|
||||
const AssistantsList = window.AssistantsList;
|
||||
const InputBar = window.InputBar;
|
||||
|
||||
return (
|
||||
<div className="g2-app" data-g2-mode="regular">
|
||||
<Sidebar />
|
||||
<section className="g2-workspace">
|
||||
<header className="g2-header">
|
||||
<div>
|
||||
<p className="g2-meta">G2 glasses HUD · regular 640 mode</p>
|
||||
<h1 className="g2-title">Live control surface</h1>
|
||||
</div>
|
||||
<span className="g2-tertiary">Focus #0D76FFA6</span>
|
||||
</header>
|
||||
<div className="g2-layout">
|
||||
<ChatArea />
|
||||
<AssistantsList />
|
||||
</div>
|
||||
<InputBar />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
window.App = App;
|
||||
@@ -0,0 +1,17 @@
|
||||
function AssistantsList() {
|
||||
return (
|
||||
<aside className="g2-assistants" aria-label="AI status cards">
|
||||
<section className="g2-card">
|
||||
<div className="g2-ai-orb" aria-hidden="true" />
|
||||
<strong>AI status</strong>
|
||||
<p className="g2-secondary">Listening for contextual commands.</p>
|
||||
</section>
|
||||
<section className="g2-card">
|
||||
<strong>Device</strong>
|
||||
<p className="g2-tertiary">Battery 82% · Network stable</p>
|
||||
</section>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
window.AssistantsList = AssistantsList;
|
||||
@@ -0,0 +1,19 @@
|
||||
function ChatArea() {
|
||||
const MessageBubble = window.MessageBubble;
|
||||
|
||||
return (
|
||||
<main className="g2-thread" aria-label="G2 message workspace">
|
||||
<MessageBubble sender="Call" meta="Connected">
|
||||
Front display is active. Keep the action bar visible and controls close to the current task.
|
||||
</MessageBubble>
|
||||
<MessageBubble sender="Assistant" meta="AI reply" tone="ai">
|
||||
Suggested next prompt is ready. Use the compact command surface when switching to 320 mode.
|
||||
</MessageBubble>
|
||||
<MessageBubble sender="Teleprompter" meta="Preview">
|
||||
Keep type large, direct, and source-backed. Avoid dashboard density and marketing layout.
|
||||
</MessageBubble>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
window.ChatArea = ChatArea;
|
||||
@@ -0,0 +1,10 @@
|
||||
function InputBar() {
|
||||
return (
|
||||
<form className="g2-input-bar" onSubmit={(event) => event.preventDefault()}>
|
||||
<input className="g2-command-input" aria-label="G2 command" placeholder="Speak or type a G2 command" />
|
||||
<button className="g2-send-button" type="button">Send</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
window.InputBar = InputBar;
|
||||
@@ -0,0 +1,10 @@
|
||||
function MessageBubble({ sender, meta, children, tone = "default" }) {
|
||||
return (
|
||||
<article className="g2-message" data-tone={tone}>
|
||||
<div className="g2-meta">{sender} · {meta}</div>
|
||||
<div>{children}</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
window.MessageBubble = MessageBubble;
|
||||
@@ -0,0 +1,15 @@
|
||||
function Sidebar() {
|
||||
const items = ["Call", "Messages", "AI", "Device"];
|
||||
|
||||
return (
|
||||
<nav className="g2-sidebar" aria-label="G2 HUD navigation">
|
||||
{items.map((item, index) => (
|
||||
<button className="g2-nav-button" aria-current={index === 0 ? "true" : undefined} key={item}>
|
||||
{item}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
window.Sidebar = Sidebar;
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>G2 Design System UI Kit</title>
|
||||
<link rel="stylesheet" href="./colors_and_type.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
||||
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
<script type="text/babel" src="./components/MessageBubble.jsx"></script>
|
||||
<script type="text/babel" src="./components/Sidebar.jsx"></script>
|
||||
<script type="text/babel" src="./components/AssistantsList.jsx"></script>
|
||||
<script type="text/babel" src="./components/ChatArea.jsx"></script>
|
||||
<script type="text/babel" src="./components/InputBar.jsx"></script>
|
||||
<script type="text/babel" src="./components/App.jsx"></script>
|
||||
<script type="text/babel">
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(<window.App />);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
|
||||
"specVersion": "1.0.0",
|
||||
"name": "g2-design-system-ui-kit-mqgbmh2w",
|
||||
"title": "G2 Design System UI Kit",
|
||||
"version": "0.1.0",
|
||||
"description": "A packaged Open Design UI kit for HiCatcat G2 AR glasses HUD prototypes. Includes index.html, local token CSS, and modular React components for regular 640 and compact 320 display modes.",
|
||||
"od": {
|
||||
"kind": "skill",
|
||||
"taskKind": "new-generation",
|
||||
"context": {
|
||||
"skills": [
|
||||
{
|
||||
"path": "./SKILL.md"
|
||||
}
|
||||
]
|
||||
},
|
||||
"capabilities": [
|
||||
"prompt:inject"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"candidateId": "33633026-3f08-4a00-86c8-1bbd1d3e1ce4",
|
||||
"projectId": "ds-design-system",
|
||||
"runId": "bc1b4d1f-a76f-4fa1-b83a-60bf8905dc6f",
|
||||
"conversationId": "40d20cfe-9a0b-41e1-9810-4ec34c7b3bd3",
|
||||
"provenance": {
|
||||
"summary": "Formalized from the G2 design system import, then corrected so all paths named by the skill and manifest are packaged inside this plugin folder.",
|
||||
"detectedAt": 1781594313727
|
||||
},
|
||||
"sourceRefs": [
|
||||
{
|
||||
"kind": "file",
|
||||
"value": "index.html",
|
||||
"label": "index.html",
|
||||
"size": 0,
|
||||
"copied": true
|
||||
},
|
||||
{
|
||||
"kind": "file",
|
||||
"value": "SKILL.md",
|
||||
"label": "SKILL.md",
|
||||
"size": 1762,
|
||||
"copied": true
|
||||
},
|
||||
{
|
||||
"kind": "file",
|
||||
"value": "colors_and_type.css",
|
||||
"label": "colors_and_type.css",
|
||||
"size": 0,
|
||||
"copied": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
# G2 Design System UI Kit Reference
|
||||
|
||||
This plugin packages a browser-reviewable G2 AR glasses HUD UI kit.
|
||||
|
||||
## Packaged Files
|
||||
|
||||
- `index.html` - Preview entry for the composed HUD surface.
|
||||
- `colors_and_type.css` - Local G2 token CSS.
|
||||
- `components/App.jsx` - App shell.
|
||||
- `components/Sidebar.jsx` - HUD navigation rail.
|
||||
- `components/AssistantsList.jsx` - AI and device status cards.
|
||||
- `components/ChatArea.jsx` - Message, call, and teleprompter workspace.
|
||||
- `components/InputBar.jsx` - Bottom command surface.
|
||||
- `components/MessageBubble.jsx` - Message unit.
|
||||
- `README.md` - Package guide and validation notes.
|
||||
|
||||
## Use
|
||||
|
||||
Open `index.html` to review the kit, or copy the component files into a React prototype. Keep `colors_and_type.css` loaded first so the G2 token variables resolve.
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
name: g2-design-system-ui-kit
|
||||
description: Use this skill when generating Open Design artifacts that should follow the HiCatcat G2 AR glasses HUD design system.
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
Read `SKILL.md`, `README.md`, `colors_and_type.css`, `index.html`, and the files under `components/` before generating a new G2 HUD interface.
|
||||
|
||||
Use the source-backed G2 cues: black canvas, white and gray text hierarchy, `#333333` controls, `#0D76FF` selected state, `#0D76FFA6` focus/touch feedback, Noto Sans Medium/Bold, and compact/regular display modes.
|
||||
|
||||
Do not use warm brand accents, generic SaaS dashboard patterns, marketing-page hero sections, or references to files not packaged in this plugin.
|
||||
@@ -0,0 +1,19 @@
|
||||
# G2 AR Glasses HUD Source Notes
|
||||
|
||||
HiCatcat G2 is an AR glasses control interface design system. The plugin focuses on dark HUD surfaces: calls, messages, AI cards, dialogs, toasts, teleprompter, device information, and bottom command bars.
|
||||
|
||||
## Token Direction
|
||||
|
||||
- Background: `#000000`.
|
||||
- Primary text: `#FFFFFF`.
|
||||
- Secondary text: `#DDDDDD`.
|
||||
- Tertiary text: `#BBBBBB`.
|
||||
- Control, border, disabled: `#333333`.
|
||||
- Selected: `#0D76FF`.
|
||||
- Focus and touch feedback: `#0D76FFA6`.
|
||||
- Typography: Noto Sans Medium/Bold.
|
||||
- Modes: regular 640 and compact 320.
|
||||
|
||||
## Review Notes
|
||||
|
||||
This plugin intentionally packages the files referenced by `SKILL.md`: `index.html`, `colors_and_type.css`, and `components/`.
|
||||
Reference in New Issue
Block a user