Agent skill

Style Terminal

by pnp in pnp/sharepoint-skills

Terminal / Hacker style tokens and row template for the list-styling skill.

MITAuto-check passedFrontend & Design

Install Style Terminal

skills CLI
$ npx skills add pnp/sharepoint-skills --skill style-terminal -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install pnp/sharepoint-skills style-terminal --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
style-terminal
GitHub stars
132
Token cost
~2.3k tokens
SKILL.md length
595 words
Files
1
Skills in repo
51
Repo updated
First seen
Licence
MIT

At a glance

Terminal / Hacker style tokens and row template for the list-styling skill.

  • The user says terminal
  • SKILL.md covers Badge Tokens, Row Card Tokens, Row Template Layout and rowFormatter JSON, plus 3 more sections
  • Reaches developer.microsoft.com
  • Tasks that involve Design tokens

What it does

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.

When your agent uses it

  • The user says terminal
  • Tasks that involve Design tokens
  • Tasks that involve Theming and dark mode

Example prompts

  • “terminal,”
  • “hacker,”
  • “dark mode,”
  • “/style-terminal”

What it can do on your machine

Read from SKILL.md and the folder at commit aa9eb14. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    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.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • developer.microsoft.com

    Also links to:

    • webaim.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~77
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from pnp/sharepoint-skills at commit aa9eb14, republished under its MIT licence (© pnp). 595 words, ~2,336 tokens.

Download SKILL.mdSave it as .claude/skills/style-terminal/SKILL.md (or your agent's skills folder).
name
style-terminal
description
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.

Terminal — Style Tokens + Row Template

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.

Badge Tokens

  • padding: 4px 12px
  • border-radius: 2px
  • font-size: 11px
  • font-weight: 700
  • text-transform: uppercase
status_colors
Valuebgtextborder
Draft#374151#9ca3af1px solid #4b5563
In Review#1e3a5f#38bdf81px solid #0ea5e9
Revising#422006#fb923c1px solid #f97316
Approved#052e16#4ade801px solid #22c55e
Published#022c22#34d3991px solid #10b981
_fallback#1f2937#6b72801px solid #374151

Row Card Tokens

  • card_background: #0f172a (near-black navy)
  • card_border: 1px solid #1e293b
  • card_border_radius: 4px (slightly rounded — terminals have some softness)
  • card_margin_bottom: 4px (tight spacing — dense like terminal output)
  • card_shadow: none
  • card_padding: 14px 18px
  • prompt_char: >
  • prompt_color: #4ade80
  • filename_color: #e2e8f0
  • separator_color: #334155
  • overdue_border: 1px solid #ef4444
  • overdue_glow: 0px 0px 8px #ef444433 (subtle red glow for overdue)

Row Template Layout

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 glow

rowFormatter JSON

Adapt 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.

json
{
  "$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'))"
            }
          }
        ]
      }
    ]
  }
}

Checklist — "I Can't Believe That's SharePoint"

  • ✅ Full rowFormatter — NOT default column grid
  • ✅ DARK BACKGROUND (#0f172a) on every card — this IS the style
  • ✅ Neon green > prompt character before every document name
  • ✅ Light text on dark (#e2e8f0) for filenames
  • ✅ Status badges have dark bg + neon colored text (inverted from normal)
  • ✅ Progress percentage is neon green (#4ade80)
  • ✅ Progress bar track is dark (#1e293b), fills glow neon (red → cyan → green)
  • ✅ Zero border-radius on progress bar — hard edges
  • ✅ Overdue shows [OVERDUE] in brackets like a CLI flag
  • ✅ Overdue cards get a subtle red glow (box-shadow)
  • ✅ Tight 4px spacing between cards — dense like terminal output
  • ✅ No emoji anywhere — terminals don't have emoji
  • ✅ Only style with dark cards — immediately distinguishable from everything else

Show full SKILL.md (227 more words)Show less

Responsive / mobile

  • ≤ 600 px: collapse the secondary metadata column under the terminal prompt icon. Keep the > prompt visible at every breakpoint — it carries the identity.
  • ≤ 480 px: hide the bracketed flags except [OVERDUE]; status colour does the work.
  • Hero text: monospace 14 px on desktop — do not step down further. Mono fonts at < 13 px become unreadable on small screens.
  • Touch targets: ≥ 44 × 44 px. Tight 4 px row spacing satisfies density but the row card itself stays tappable.

Implementation notes

Neon contrast on dark (pinned)

The terminal palette is genuinely AAA on its dark background — the neon isn't decorative, it's measured.

ForegroundBackgroundRatioWCAG
Neon green #39FF7ADark #0F0F12≈ 9.1 : 1AAA
Cyan #5BE7FFDark #0F0F12≈ 11.4 : 1AAA
Salmon #FF7A7A (used for [OVERDUE])Dark #0F0F12≈ 5.1 : 1AA (normal text)
Muted grey #8A8F98 (chrome)Dark #0F0F12≈ 4.6 : 1AA Large only — use for non-essential text

Re-verify in WebAIM if any neon token is changed.

Audience scope (also in README)

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

Files

Just SKILL.md in Skills/style-terminal/style-terminal of pnp/sharepoint-skills.

Open the folder on GitHubat commit aa9eb14

Compare with similar skills

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.

Style Terminal compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Style Terminal this skillpnp/sharepoint-skills132—~2.3kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Scalar Design Systemscalar/scalar16k—~2.7kAutomated safety check: PassMIT
Refactoring UIs0xDk/refactoring-ui-skill591—~3.5kAutomated safety check: PassMIT
Liuguang Banlan UIsickn33/agentic-awesome-skills47k1 repos~2.5kAutomated safety check: PassMIT

Similar skills

  • Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed
  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed
  • Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

    16k GitHub stars~2.7k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Refactoring UI

    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…

    591 GitHub stars~3.5k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed
  • Liuguang Banlan UI

    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.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Frontend & DesignAuto-check passed
  • Tailwind Theme Builder

    jezweb/claude-skills

    Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.

    1.1k GitHub starsUsed in 1 repo~3.2k tokens
    Frontend & DesignAuto-check passed

More from pnp/sharepoint-skills

All 51 skills in this repo
  • Scorecard Matrix

    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…

    132 GitHub stars~1.9k tokensUpdated 3 days ago
    Auto-check passed
  • Analyze Document Library

    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.

    132 GitHub stars~899 tokensUpdated 3 days ago
    Auto-check passed
  • Broken Link Auditor

    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.

    132 GitHub stars~2.5k tokensUpdated 3 days ago
    Auto-check passed
  • Custom Image Tagger

    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…

    132 GitHub stars~1.2k tokensUpdated 3 days ago
    Auto-check passed
  • Dossier

    pnp/sharepoint-skills

    Renders a polished, self-contained HTML briefing from any data source — SharePoint lists, uploaded documents, or a verbal description.

    132 GitHub stars~1.9k tokensUpdated 3 days ago
    Auto-check passed
  • Exec Report

    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.

    132 GitHub stars~2k tokensUpdated 3 days ago
    Auto-check passed

Questions about Style Terminal

What does Style Terminal do?

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.

When should I use Style Terminal?

Style Terminal fits situations like: the user says terminal; tasks that involve Design tokens; tasks that involve Theming and dark mode.

How do I install Style Terminal in Claude Code?

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.

How do I install Style Terminal in Codex?

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.

Can I use Style Terminal in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Style Terminal need to run?

SKILL.md names no scripts, command-line tools or credentials: Style Terminal is instructions for the agent only.

Does Style Terminal access the network?

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.

Is Style Terminal safe to install?

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.

What licence does Style Terminal use?

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.

How many tokens does Style Terminal use?

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.

What are the alternatives to Style Terminal?

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.

Who maintains Style Terminal?

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.