Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Terminal / Hacker style tokens and row template for the list-styling skill.
$ npx skills add pnp/sharepoint-skills --skill style-terminal -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pnp/sharepoint-skills style-terminal --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pnp/sharepoint-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/Skills/style-terminal/style-terminal .claude/skills/style-terminal && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "style-terminal" agent skill from https://github.com/pnp/sharepoint-skills/tree/main/Skills/style-terminal/style-terminal into .claude/skills/style-terminal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-terminal", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pnp/sharepoint-skills/tree/main/Skills/style-terminal/style-terminalType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pnp/sharepoint-skills --skill style-terminal -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pnp/sharepoint-skills style-terminal --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pnp/sharepoint-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/Skills/style-terminal/style-terminal .agents/skills/style-terminal && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "style-terminal" agent skill from https://github.com/pnp/sharepoint-skills/tree/main/Skills/style-terminal/style-terminal into .agents/skills/style-terminal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-terminal", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pnp/sharepoint-skills --skill style-terminal -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pnp/sharepoint-skills style-terminal --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pnp/sharepoint-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/Skills/style-terminal/style-terminal .cursor/skills/style-terminal && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "style-terminal" agent skill from https://github.com/pnp/sharepoint-skills/tree/main/Skills/style-terminal/style-terminal into .cursor/skills/style-terminal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-terminal", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pnp/sharepoint-skills.git --path Skills/style-terminal/style-terminal--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pnp/sharepoint-skills --skill style-terminal -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pnp/sharepoint-skills style-terminal --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pnp/sharepoint-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/Skills/style-terminal/style-terminal .gemini/skills/style-terminal && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "style-terminal" agent skill from https://github.com/pnp/sharepoint-skills/tree/main/Skills/style-terminal/style-terminal into .gemini/skills/style-terminal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-terminal", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pnp/sharepoint-skills style-terminalInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pnp/sharepoint-skills --skill style-terminal -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pnp/sharepoint-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/Skills/style-terminal/style-terminal .github/skills/style-terminal && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "style-terminal" agent skill from https://github.com/pnp/sharepoint-skills/tree/main/Skills/style-terminal/style-terminal into .github/skills/style-terminal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-terminal", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pnp/sharepoint-skills --skill style-terminal -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pnp/sharepoint-skills style-terminal --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pnp/sharepoint-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/Skills/style-terminal/style-terminal .opencode/skills/style-terminal && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "style-terminal" agent skill from https://github.com/pnp/sharepoint-skills/tree/main/Skills/style-terminal/style-terminal into .opencode/skills/style-terminal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-terminal", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
style-terminalTerminal / Hacker style tokens and row template for the list-styling skill.
Style Terminal is an agent skill from pnp/sharepoint-skills. Terminal / Hacker style tokens and row template for the list-styling skill. Dark cards with neon text, green/cyan accents, sharp corners, terminal prompt icon, status displayed like CLI output. Use when the user says "terminal," "hacker," "dark mode," "matrix," "developer," "CLI," or similar.
Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Design tokens, Theming and dark mode and Cloud office suites. The repository describes itself as: Skills for Copilot in SharePoint. The licence is MIT.
Read from SKILL.md and the folder at commit aa9eb14. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are json).
From the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
developer.microsoft.comAlso links to:
webaim.orgFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Style Terminal loads about 2.3k tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 595 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from pnp/sharepoint-skills at commit aa9eb14, republished under its MIT licence (© pnp). 595 words, ~2,336 tokens.
.claude/skills/style-terminal/SKILL.md (or your agent's skills folder).Dark backgrounds, neon text, sharp corners. Each row is a dark card that looks like terminal output. Status values render like CLI flags. The progress bar glows neon green.
Layout philosophy: Dark card with terminal aesthetic. The entire card has a dark background (#0f172a). All text is bright colored on dark. Status renders like a CLI flag in brackets. The prompt character > appears before the document name. Everything feels like you're reading ls -la output.
4px 12px2px11px700uppercase| Value | bg | text | border |
|---|---|---|---|
| Draft | #374151 | #9ca3af | 1px solid #4b5563 |
| In Review | #1e3a5f | #38bdf8 | 1px solid #0ea5e9 |
| Revising | #422006 | #fb923c | 1px solid #f97316 |
| Approved | #052e16 | #4ade80 | 1px solid #22c55e |
| Published | #022c22 | #34d399 | 1px solid #10b981 |
| _fallback | #1f2937 | #6b7280 | 1px solid #374151 |
#0f172a (near-black navy)1px solid #1e293b4px (slightly rounded — terminals have some softness)4px (tight spacing — dense like terminal output)none14px 18px>#4ade80#e2e8f0#3341551px solid #ef44440px 0px 8px #ef444433 (subtle red glow for overdue)Dark card with terminal-style content. Single row of data like CLI output.
┌──────────────────────────────────────────────────────────┐
│ │
│ > API Guide.docx [IN REVIEW] ████░░ 72% 5/15 │
│ │
└──────────────────────────────────────────────────────────┘
↑ dark bg (#0f172a), neon text, overdue cards get red glowAdapt before applying. The column names below ([$Status], [$Progress], [$Deadline]) are example placeholders — replace them with the actual internal column names from the user's list. Also update every status value string ('Draft', 'In Review', 'Revising', etc.) to match the user's actual Choice values. Follow list-styling Step 3.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
"hideSelection": false,
"hideColumnHeaders": true,
"rowFormatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"gap": "8px",
"padding": "14px 18px",
"background-color": "#0f172a",
"border": "=if([$Deadline] < @now, '1px solid #ef4444', '1px solid #1e293b')",
"border-radius": "4px",
"margin-bottom": "4px",
"box-shadow": "=if([$Deadline] < @now, '0px 0px 8px #ef444433', 'none')",
"min-height": "60px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"gap": "14px",
"flex-wrap": "wrap"
},
"children": [
{
"elmType": "span",
"txtContent": ">",
"style": {
"font-size": "14px",
"font-weight": "700",
"color": "#4ade80"
}
},
{
"elmType": "div",
"style": {
"flex": "2",
"font-size": "14px",
"font-weight": "600",
"color": "#e2e8f0"
},
"txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
},
{
"elmType": "span",
"txtContent": "[$Status]",
"style": {
"display": "inline-block",
"padding": "4px 12px",
"border-radius": "2px",
"font-size": "11px",
"font-weight": "700",
"text-transform": "uppercase",
"white-space": "nowrap",
"color": "=if([$Status] == 'Draft', '#9ca3af', if([$Status] == 'In Review', '#38bdf8', if([$Status] == 'Revising', '#fb923c', if([$Status] == 'Approved', '#4ade80', if([$Status] == 'Published', '#34d399', '#6b7280')))))",
"background-color": "=if([$Status] == 'Draft', '#374151', if([$Status] == 'In Review', '#1e3a5f', if([$Status] == 'Revising', '#422006', if([$Status] == 'Approved', '#052e16', if([$Status] == 'Published', '#022c22', '#1f2937')))))",
"border": "=if([$Status] == 'Draft', '1px solid #4b5563', if([$Status] == 'In Review', '1px solid #0ea5e9', if([$Status] == 'Revising', '1px solid #f97316', if([$Status] == 'Approved', '1px solid #22c55e', if([$Status] == 'Published', '1px solid #10b981', '1px solid #374151')))))"
}
},
{
"elmType": "span",
"txtContent": "=toString([$Progress]) + '%'",
"style": {
"font-size": "14px",
"font-weight": "700",
"color": "#4ade80",
"min-width": "40px",
"text-align": "right"
}
},
{
"elmType": "span",
"txtContent": "=toLocaleDateString([$Deadline])",
"style": {
"font-size": "12px",
"font-weight": "=if([$Deadline] < @now, '700', '400')",
"color": "=if([$Deadline] < @now, '#ef4444', '#64748b')"
}
},
{
"elmType": "span",
"txtContent": "=if([$Deadline] < @now, '[OVERDUE]', '')",
"style": {
"font-size": "11px",
"font-weight": "700",
"color": "#ef4444"
}
}
]
},
{
"elmType": "div",
"style": {
"width": "100%",
"height": "4px",
"background-color": "#1e293b",
"border-radius": "0px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"style": {
"width": "=toString([$Progress]) + '%'",
"height": "100%",
"background-color": "=if([$Progress] < 30, '#ef4444', if([$Progress] < 66, '#38bdf8', '#4ade80'))"
}
}
]
}
]
}
}> prompt character before every document name[OVERDUE] in brackets like a CLI flag> prompt visible at every breakpoint — it carries the identity.[OVERDUE]; status colour does the work.The terminal palette is genuinely AAA on its dark background — the neon isn't decorative, it's measured.
| Foreground | Background | Ratio | WCAG |
|---|---|---|---|
Neon green #39FF7A | Dark #0F0F12 | ≈ 9.1 : 1 | AAA |
Cyan #5BE7FF | Dark #0F0F12 | ≈ 11.4 : 1 | AAA |
Salmon #FF7A7A (used for [OVERDUE]) | Dark #0F0F12 | ≈ 5.1 : 1 | AA (normal text) |
Muted grey #8A8F98 (chrome) | Dark #0F0F12 | ≈ 4.6 : 1 | AA Large only — use for non-essential text |
Re-verify in WebAIM if any neon token is changed.
This style is explicitly developer / technical-audience. Use it for engineering portals, dev rel sites, SRE / ops dashboards. Do not use it for general staff sites, HR / people sites, or external-facing pages — the dark + neon combination reads as "unfinished" or "broken" to a non-technical audience. If the requesting user isn't sure, default to a different style and offer Terminal as an alternative; never default into it.
© pnp, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in Skills/style-terminal/style-terminal of pnp/sharepoint-skills.
Open the folder on GitHubat commit aa9eb14
Style Terminal next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Style Terminal this skillpnp/sharepoint-skills | 132 | — | ~2.3k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| MCP Developmentcoollabsio/coolify | 63k | 1 repos | ~949 | Automated safety check: Pass | MIT | |
| Scalar Design Systemscalar/scalar | 16k | — | ~2.7k | Automated safety check: Pass | MIT | |
| Refactoring UIs0xDk/refactoring-ui-skill | 591 | — | ~3.5k | Automated safety check: Pass | MIT | |
| Liuguang Banlan UIsickn33/agentic-awesome-skills | 47k | 1 repos | ~2.5k | Automated safety check: Pass | MIT |
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
scalar/scalar
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.
s0xDk/refactoring-ui-skill
Design and improve user interfaces using the concrete rules from Refactoring UI (Wathan & Schoger) — constrained spacing/type/color/shadow scales, visual hierarchy through weight and color rather…
sickn33/agentic-awesome-skills
Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.
jezweb/claude-skills
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.
pnp/sharepoint-skills
Generates a polished, self-contained HTML heatmap scorecard — a weighted comparison matrix where entities (rows) are scored across dimensions (columns), with computed totals, rank badges, and a…
pnp/sharepoint-skills
Analyze the current SharePoint document library in read-only mode and produce a structured summary of files, folders, file types, recent activity, naming issues, and organization recommendations.
pnp/sharepoint-skills
Audits SharePoint pages, news posts, and hyperlink fields for broken or risky links and saves a self-contained HTML link-health report to the site.
pnp/sharepoint-skills
Analyze selected construction images, create missing object metadata columns, and write concise visual metadata back to SharePoint columns using explicit image-analysis, list-schema, list-update…
pnp/sharepoint-skills
Renders a polished, self-contained HTML briefing from any data source — SharePoint lists, uploaded documents, or a verbal description.
pnp/sharepoint-skills
Generates a polished, self-contained HTML executive report or dashboard from any data source — SharePoint lists, CSV exports, or a user description.
Categories
Terminal / Hacker style tokens and row template for the list-styling skill. Style Terminal is an agent skill from pnp/sharepoint-skills. Terminal / Hacker style tokens and row template for the list-styling skill.
Style Terminal fits situations like: the user says terminal; tasks that involve Design tokens; tasks that involve Theming and dark mode.
Run `npx skills add pnp/sharepoint-skills --skill style-terminal -a claude-code`. Or copy the skill folder (Skills/style-terminal/style-terminal in pnp/sharepoint-skills) into .claude/skills/style-terminal in your project. Claude Code loads it when a task matches its description.
Run `npx skills add pnp/sharepoint-skills --skill style-terminal -a codex`. Or copy the skill folder (Skills/style-terminal/style-terminal in pnp/sharepoint-skills) into .agents/skills/style-terminal in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pnp/sharepoint-skills --skill style-terminal -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/style-terminal, .gemini/skills/style-terminal, .github/skills/style-terminal and .opencode/skills/style-terminal in your project.
SKILL.md names no scripts, command-line tools or credentials: Style Terminal is instructions for the agent only.
SKILL.md names 2 domains. In commands or code: developer.microsoft.com; the agent is likely to contact it when it follows the instructions. As links in the text: webaim.org. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Style Terminal is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.3k tokens (SKILL.md is roughly 9.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Style Terminal: Figma Design System Builder (warpdotdev/warp, 65k stars), MCP Development (coollabsio/coolify, 63k stars), Scalar Design System (scalar/scalar, 16k stars) and Refactoring UI (s0xDk/refactoring-ui-skill, 591 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
pnp (a GitHub organization) maintains it in pnp/sharepoint-skills, which has 132 GitHub stars. The repository holds 51 skills in this directory. The repository was last updated on October 6, 2026.
Source: pnp/sharepoint-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.