Claude-skill-registry 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.
install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/frago-view-content-generate-tips-code" ~/.claude/skills/majiayu000-claude-skill-registry-frago-view-content-generate-tips-code && rm -rf "$T"
manifest:
skills/data/frago-view-content-generate-tips-code/SKILL.mdsource content
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 |
|---|---|---|
| Python | python |
| JavaScript | javascript |
| TypeScript | typescript |
| JSX | javascript |
| TSX | typescript |
| CSS | css |
| SCSS | scss |
| HTML | html |
| JSON | json |
/ | YAML | yaml |
| TOML | toml |
| XML | xml |
| SQL | sql |
/ | Bash | bash |
| Go | go |
| Rust | rust |
| Java | java |
/ | C | c |
/ | C++ | cpp |
| Ruby | ruby |
| PHP | php |
| Swift | swift |
| Kotlin | kotlin |
| Lua | lua |
| R | r |
| Plain Text | plaintext |
Code Themes
| Theme | Style | Use Case |
|---|---|---|
| GitHub Dark (default) | Daily use |
| GitHub Light | White background preference |
| Monokai Classic | Developer preference |
| Atom Dark | Modern style |
| Atom Light | Light preference |
| 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 | |
| Text | |
| Keywords | |
| Strings | |
| Comments | |
| Functions | |
| Numbers | |
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)