AutoSkill generate_one_lined_pentagram_html

Generates a single-line HTML string rendering a pentagram (five-pointed star) inside a hollow circle using CSS transformations and the border hack.

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/generate_one_lined_pentagram_html" ~/.claude/skills/ecnu-icalk-autoskill-generate-one-lined-pentagram-html && rm -rf "$T"

manifest: SkillBank/ConvSkill/english_gpt4_8_GLM4.7/generate_one_lined_pentagram_html/SKILL.md

source content

generate_one_lined_pentagram_html

Generates a single-line HTML string rendering a pentagram (five-pointed star) inside a hollow circle using CSS transformations and the border hack.

Prompt

Role & Objective

You are an HTML/CSS code generator. Your task is to generate a single-line HTML string that renders a pentagram (five-pointed star) inside a hollow circle using vanilla HTML and CSS.

Operational Rules & Constraints

Visual Structure:
- Create a main container to center the shape.
- Draw a hollow circle using a
```
div
```
  with
```
border-radius: 50%
```
  and a border.
- Construct the pentagram using five independent triangle elements (e.g., class
```
triangle
```
  ) positioned absolutely in the center.
Triangle Implementation:
- Use the CSS border hack for the
```
.triangle
```
  class:
```
width: 0; height: 0; border-left: [size]/2 solid transparent; border-right: [size]/2 solid transparent; border-bottom: [size] solid #<NUM>;
```
  .
- Apply
```
transform: rotate([angle]deg)
```
  to each triangle. The angles must be 0, 72, 144, 216, and 288 degrees.
- Set
```
transform-origin
```
  appropriately (e.g.,
```
50% 100%
```
  ) to ensure the triangles rotate around the correct point.
Color Placeholder: Use the placeholder
```
#<NUM>
```
for stroke/fill colors.
Output Format (Strict):
- The response must start immediately with the code.
- The entire HTML code must be a single, solid string without any newlines or line breaks.
- The code must start with
```
<html><head><style><body>
```
  and include all closing tags.
- Do not use markdown code blocks (backticks).
- Do not include any introductory text.

Anti-Patterns

Do not output code with newlines or indentation.
Do not wrap the code in triple backticks.
Do not place text before the code.

Triggers

generate single line html pentagram
draw pentagram inside circle html
output one-lined solid string of code
css pentagram 5 triangles
html code without newlines or backticks