majiayu000/claude-arsenal
xiaohongshu
xiaohongshu
286 148
View 
Code File Content Generation Guide
frago-view-content-generate-tips-code
Code file content generation guide. Use this skill when you need to create code files that can be previewed via `frago view`. Covers supported languages, theme selection, and best practices.
SKILL.md
Full skill instructions
Code File Content Generation Guide
Preview code files via frago view with automatic syntax highlighting.
Preview Commands
frago view script.py # Default theme
frago view script.py --theme monokai # Specify theme
Supported File Types
| Extension | Language | highlight.js Tag |
|---|---|---|
.py | Python | python |
.js | JavaScript | javascript |
.ts | TypeScript | typescript |
.jsx | JSX | javascript |
.tsx | TSX | typescript |
.css | CSS | css |
.scss | SCSS | scss |
.html | HTML | html |
.json | JSON | json |
.yaml / .yml | YAML | yaml |
.toml | TOML | toml |
.xml | XML | xml |
.sql | SQL | sql |
.sh / .bash | Bash | bash |
.go | Go | go |
.rs | Rust | rust |
.java | Java | java |
.c / .h | C | c |
.cpp / .hpp | C++ | cpp |
.rb | Ruby | ruby |
.php | PHP | php |
.swift | Swift | swift |
.kt | Kotlin | kotlin |
.lua | Lua | lua |
.r | R | r |
.txt | Plain Text | plaintext |
Code Themes
| Theme | Style | Use Case |
|---|---|---|
github-dark | GitHub Dark (default) | Daily use |
github | GitHub Light | White background preference |
monokai | Monokai Classic | Developer preference |
atom-one-dark | Atom Dark | Modern style |
atom-one-light | Atom Light | Light preference |
vs2015 | Visual Studio | Windows style |
# Preview with different themes
frago view main.py --theme monokai
frago view config.yaml --theme atom-one-dark
Best Practices
1. File Encoding
- Must use UTF-8 encoding
- Avoid BOM header
- Use LF line endings (Unix style)
2. Line Length
- Single line no more than 120 characters
- Very long lines will be truncated on display
3. Comment Guidelines
# Single-line comments should be clear and concise
"""
Multi-line comments used for:
- Module documentation
- Function documentation
- Complex logic explanation
"""
4. Code Structure
- Group logic with blank line separation
- Two blank lines between functions/classes
- Group related imports
Display Features
Automatic Line Numbers
Code preview automatically displays line numbers for easy reference.
Syntax Highlighting
Based on highlight.js, automatically recognizes language and highlights:
- Keywords
- Strings
- Comments
- Numbers
- Function names
- Class names
Style Reference (github-dark)
| Element | Color |
|---|---|
| Background | #0d1117 |
| Text | #c9d1d9 |
| Keywords | #ff7b72 |
| Strings | #a5d6ff |
| Comments | #8b949e |
| Functions | #d2a8ff |
| Numbers | #79c0ff |
Notes
| Issue | Cause | Solution |
|---|---|---|
| No syntax highlighting | Extension not recognized | Use standard extensions |
| Chinese garbled text | Encoding issue | Ensure UTF-8 |
| Truncated display | Line too long | Control line length |
| Slow rendering | File too large | Split or simplify |
Use Cases
- Code snippet display
- Configuration file preview
- Script review
- Code sharing
Not suitable for: Complete source code of large projects (recommend using IDE)
More skills from majiayu000
majiayu000/claude-arsenal
technical-spec
technical spec
286 141
View majiayu000/claude-arsenal
product-ux-expert
product ux expert
286 133
View majiayu000/claude-arsenal
database-patterns
database patterns
286 119
View majiayu000/claude-skill-registry
agent-task-conductor
Conduct multi-agent task orchestration and workflow coordination.
663 1
View majiayu000/claude-skill-registry
conductor-setup
Initialize project with Conductor artifacts (product definition,
663 1
View majiayu000/claude-skill-registry
animation-designer
Expert in web animations, transitions, and motion design using Framer Motion and CSS
663 1
View majiayu000/claude-skill-registry
diagramming
Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual docume...
663 1
View majiayu000/claude-skill-registry-data
h3-pg
PostgreSQL bindings for H3 hexagonal grid system. Use when working with H3 cells in Postgres, including spatial indexing, geometry/geography integration, and raster analysis.
23 1
View majiayu000/claude-skill-registry
conductor-development
Context-Driven Development skill for projects using Conductor. Use this skill when you detect a `conductor/` directory in the project, when working on tasks defined in a `plan.md` file, or when the user asks about tracks, specs, or plans. Automatically applies TDD workflow, tracks task completion...
663 1
View majiayu000/claude-skill-registry
conductor-status
Display project status, active tracks, and next actions
663 1
View majiayu000/claude-skill-registry
dockerization
Official Stakpak application containerization standard operating procedure, a step-by-step guidline to properly dockerize applications. This is a rule book curated by the Stakpak Team.
663 1
View Popular AI tools
Video
Kaiber
Generate, edit, and beat-sync AI video with leading models in one workspace.
Paid
View Productivity
Vimcal
The world's fastest calendar for remote work
Free
View I
Images
IMGCreator.ai
Transform Your Design with AI Designer by ImgCreator.ai
Freemium
View Content & writing
Akool AI
Revolutionizing Video Production with AI-Powered Creativity
Paid
View Images
Clipdrop Uncrop
Extend an image past the frame and let AI fill the new aspect ratio.
Freemium
View Security
StarByFace
Discover your celebrity doppelgänger with StarByFace!
Free
View C
Finance
ChainClarity
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Freemium
View Coding & apps
Opus Clip
Opus.ai: Revolutionize Your Web Experience
Free
View