How to use the Framed Tech Dark Design agent skill

What is an agent skill, and what does this one make the agent do?

An agent skill is a folder containing a SKILL.md file. The agent reads that file when it is relevant to your request and then follows its guidance. This skill is a design direction, not a code library: it describes how the interface should look and be structured.

Without the skill, an agent often defaults to generic dark mode or soft floating cards. With it, the agent is steered toward a framed, engineered look built around visible boundaries rather than soft shadows.

• Near-black foundation with subtle tonal separation between background, panels and interactive rows
• Visible edge rails, thin grid boundaries and small corner markers that define the container
• One-pixel gradient borders used as a signature motif on containers, buttons and cards
• Mostly grayscale palette of black, charcoal, smoke gray, white and silver, with any accent kept sparse
• Quiet sans-serif text paired with uppercase mono labels and micro-metadata
• Asymmetrical grid layouts, such as a larger hero panel beside a smaller utility panel
• Calm, procedural motion and controlled monochrome background effects

How do you install the Framed Tech Dark Design skill?

Download the ZIP for the skill from the item page. Unzip it so that the folder containing SKILL.md ends up in a skills directory. You have two options depending on where you want the skill to be available.

For a personal install across your projects, place the unzipped folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder. If you use the Claude apps instead, you can upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/ (available everywhere on your machine)
• Project only: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload the skill

How do you trigger the skill with a natural request?

The skill's demo prompts reference it with the name $framed-tech-dark-border-gradient. Including that name makes it explicit which skill you want the agent to use. You can also describe the look in your own words and say you want the framed, dark, technical style.

Be specific about the page or screen. The skill works best when the agent knows what it is building and which parts should be heroes, controls or detail cards.

What example requests work well?

The included PROMPT.md file contains a minimal prompt and a fuller prompt for recreating the demo. The fuller version asks for a responsive reference page that compares the treatment across a hero surface, a compact control and a detail card, with one clear focal point.

You can adapt these patterns for your own work. Name the product, the sections you need and whether you want a landing page or a dashboard.

• A landing page hero with a framed shell, one feature grid and a small contact control
• A monitoring dashboard with a large visualization panel, a list of status rows and a utility panel
• A settings screen where the active navigation item uses a left-edge bar and the inactive items stay outlined

What do you need before you start?

The item lists no required tools or dependencies. The skill itself is a set of written instructions and an example. Because it runs no scripts and makes no network calls, nothing needs to run on your machine beyond the agent you already use.

The files included are demo/index.html, demo/PROMPT.md and SKILL.md. The demo HTML and prompt file show an example of the result, so you can open the demo to see the look before applying it to your own project.

• No listed requirements
• Runs scripts: no
• Uses network: no
• Included files: demo/index.html, demo/PROMPT.md, SKILL.md

What should you check for safety, accessibility and quality?

Because the skill runs no scripts and uses no network access, its main risks are about the output rather than the installation. Read any generated code as you would for any agent output before you deploy it.

The style relies on low-contrast borders and subtle backgrounds. The skill itself gives tuning knobs for border brightness and surface opacity, but it does not provide a contrast check. Run a separate accessibility check before using the result for anything accessibility-critical.

• Test text contrast against the near-black fills, especially small uppercase mono labels
• Check that inactive rows and borders remain perceivable, not just decorative
• Keep accent color sparse so that active states stay readable

What tips improve the results?

The skill lists tuning knobs you can name in your request. Asking for a specific level of framing density or border brightness usually gives a more controlled result than a general request for a dark look.

Avoid asking for neon glows, chunky shadows or playful colors, because the skill explicitly steers away from them. If you want more identity, ask for a small brand accent in active cues only.

• Name the density: more or fewer corner marks, overshoot rails and scan lines
• Set border brightness: brighter edges feel more premium, dimmer edges feel more severe
• Choose surface opacity: matte solid fills or lightly translucent dark glass
• Keep background effects monochrome, such as a soft wave field or faint blur bloom