skills.rest
The-Focus-AI
The-Focus-AIOFFICIAL
Explore all skills by this author →
WebsiteGitHub

focus-ai-brand

Apply Focus.AI brand guidelines to documents, presentations, and websites.

Updated Jul 16, 2026
Search Tags:#typography#design system#brand guidelines#tailwind#pdf report#pptx generation#paged.js
One-click install
npx skills add https://github.com/The-Focus-AI/walking-thoughts --skill focus-ai-brand-the-focus-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: focus-ai-brand
Source: https://github.com/The-Focus-AI/walking-thoughts/tree/main/.agents/skills/focus-ai-brand
Command: npx skills add https://github.com/The-Focus-AI/walking-thoughts --skill focus-ai-brand-the-focus-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pptxgenjs, react, react-dom, react-icons, sharp, and includes references (resource) components.

What problem does it solve? Creating on-brand materials for Focus.AI requires knowing which sub-brand applies (Client vs Labs), which colors, fonts, and spacing rules to use, and how to produce polished outputs like PDF reports and PowerPoint decks without memorizing the entire design system. ## Core Features & Use Cases - Dual Brand System: Applies the correct palette, typography, and voice for Focus.AI Client (editorial, Petrol/Vermilion) or Focus.AI Labs (research-report, Rand-Blue/Alert-Red) materials. - Report and Deck Generation: Converts markdown into styled HTML/PDF reports via the /report command (with paged.js smart page breaks) and branded .pptx presentations via the /deck command using PptxGenJS. - Component and Layout Patterns: Provides Tailwind component snippets, 12-column and asymmetric editorial grids, opacity-based hierarchy rules, and a pre-ship audit checklist. - Use Case: Turn a markdown research write-up into a Labs-styled PDF report with a cover page, running headers, and auto-numbered sections, or generate a Client-branded pitch deck from the same content. ## Quick Start Ask the AI to apply the Focus.AI Labs style to your markdown file and generate a branded PDF report using the /report command.

Frequently Asked Questions about focus-ai-brand

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between the Focus.AI Client and Labs brand styles?▼

Use the Client brand for services, proposals, case studies, and product marketing; use the Labs brand for research reports, experiments, technical blog posts, and open source projects. Client uses Petrol and Vermilion accents, while Labs uses Rand-Blue and Alert-Red.

How do I convert markdown to a branded PDF report?▼

Run the /report command with your markdown file, for example /report file:./proposal.md style:client output:./proposal.pdf. Specifying an output path uses the paged template with paged.js for smart page breaks, running headers, and a cover page.

How do I generate a branded PowerPoint presentation from markdown?▼

Use the /deck command, such as /deck file:./content.md style:labs output:./deck.pptx. It generates a PptxGenJS script using brand slide masters, with Georgia for display text, Calibri for body, and Consolas for labels.

What fonts and colors does the Focus.AI design system use?▼

It uses Inter for body and headings, Source Serif 4 for display only, and Courier Prime for labels. Backgrounds are warm paper tones (#faf9f6 Client, #f3f2ea Labs), never pure white or black, with hierarchy created through opacity rather than extra hues.

What are common mistakes when applying this design system?▼

Common mistakes include using pure white backgrounds, font-bold alone on headings instead of font-black with tight tracking, body text wider than 60ch, gray shades instead of opacity variants, and mixing Renaissance imagery (Client) with Bell Labs/Tufte imagery (Labs).

Related Skills

Explore More Design & Creative Skills→
MengboooMengbooo

blog-writer

Generate Chinese technical blog posts in BemoDB style with Markdown.

Community
Intermediate
TheBoomerDevTheBoomerDev

presentation-builder

Plan and generate browser-ready HTML slide decks, then export to PPTX or PDF.

Community
Intermediate
eugene-belkovicheugene-belkovich

image-generation

Generate branded visuals and diagrams for Chaos Labs content.

Community
Intermediate
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced